Grid 是一個(gè)基于二維網(wǎng)格布局的系統(tǒng)，有了它我們可以非常方便的實(shí)現(xiàn)過(guò)去很復(fù)雜布局，無(wú)需再使用 float , inline-block , position 這些本質(zhì)上是 hack 的方法。

CSS網(wǎng)格布局擅長(zhǎng)于將一個(gè)頁(yè)面劃分為幾個(gè)主要區(qū)域，以及定義這些區(qū)域的大小、位置、層次等關(guān)系（前提是HTML生成了這些區(qū)域）。

它像表格一樣，網(wǎng)格布局讓我們能夠按行或列來(lái)對(duì)齊元素。 然而在布局上，網(wǎng)格比表格更可能做到或更簡(jiǎn)單。

網(wǎng)格布局概念

在學(xué)習(xí)之前需要了解以下網(wǎng)格的幾個(gè)概念。

網(wǎng)格軌道（Grid Tracks）

網(wǎng)格軌道 是兩條網(wǎng)格線之間的空間。它們通過(guò)使用屬性 grid-template-columns 和 grid-template-rows 在網(wǎng)格中定義。

上圖中有兩行三列，一行或一列就叫做軌道。

網(wǎng)格線（Grid Lines）

使用 Grid 布局在顯式網(wǎng)格中定義軌道的同時(shí)會(huì)創(chuàng)建網(wǎng)格線。

網(wǎng)格線可以用它們的編號(hào)來(lái)尋址。在從左到右的語(yǔ)言中， 列線1 將位于網(wǎng)格的左側(cè)， 行線1 將位于其頂部。線編號(hào)遵循文檔的寫入模式，因此在從右到左的語(yǔ)言中， 列線1 行將位于網(wǎng)格的右側(cè)。下面的圖片展示了該網(wǎng)格的線編號(hào)，假設(shè)語(yǔ)言是從左到右的。

網(wǎng)絡(luò)單元格（Grid Cell）

在 Grid 布局中，網(wǎng)絡(luò)單元格是 CSS 網(wǎng)格中的最小單元。它是四條網(wǎng)格線之間的空間，非常像表格單元格。

網(wǎng)格區(qū)域（Grid Areas）

網(wǎng)格區(qū)域是網(wǎng)格中由一個(gè)或者多個(gè)網(wǎng)格單元格組成的一個(gè)矩形區(qū)域。本質(zhì)上，網(wǎng)格區(qū)域一定是矩形的。例如，不可能創(chuàng)建T形或L形的網(wǎng)格區(qū)域。

網(wǎng)格間距（Gutters）

網(wǎng)格間距是網(wǎng)格軌道之間的間距，可以通過(guò) grid-column-gap ， grid-row-gap 在Grid布局中創(chuàng)建。

使用 Grid 布局

和 flex 類似，要使用網(wǎng)格布局，首先要有一個(gè)容器，將一個(gè)元素的 display 設(shè)置為 grid 就可以得到一個(gè) grid 容器。容器的子項(xiàng)就是網(wǎng)格項(xiàng)（grid items），它有點(diǎn)類似 table 中的 td ，但是更加靈活。

float , clear , 和 vertical-align 元素對(duì)網(wǎng)格容器不起作用。

容器上的屬性

網(wǎng)格模板

創(chuàng)建了網(wǎng)格容器，我們就可以定義這個(gè)網(wǎng)格有多少行有多少列，并且每一行每一列的大小。

grid-template-rows

我們使用 grid-template-rows 來(lái)顯性定義網(wǎng)格有多少行。它可以取如下的值：

none 關(guān)鍵字，表示不明確的網(wǎng)格。所有的行和其大小都將由 grid-auto-rows 屬性隱式的指定。

非負(fù)值的長(zhǎng)度大小 ：如 px, em, vw 等

百分比 ：相對(duì)于網(wǎng)格容器的，如果是 inline-grid ，則百分比值將被視為 auto

flex ：非負(fù)值，用單位 fr 來(lái)定義網(wǎng)格軌道大小的彈性系數(shù)。每個(gè)定義了 flex 的網(wǎng)格軌道會(huì)按比例分配剩余的可用空間

max-content 關(guān)鍵字，表示以網(wǎng)格項(xiàng)的最大的內(nèi)容來(lái)占據(jù)網(wǎng)格軌道的

min-content 關(guān)鍵字，表示以網(wǎng)格項(xiàng)的最大的最小內(nèi)容來(lái)占據(jù)網(wǎng)格軌道

auto 如果該網(wǎng)格軌道為最大時(shí)，等同于 max-content ，為最小時(shí)，等同于 min-content

grid-template-columns

它和 grid-template-rows 類似，一個(gè)設(shè)置網(wǎng)格行，一個(gè)是設(shè)置網(wǎng)格列。

.container {
    display: grid;
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

Grid 中可以使用的函數(shù)

在 Grid 布局中我們還可以使用如下 3 個(gè)函數(shù)

repeat()

repeat 函數(shù)可以以一種更簡(jiǎn)潔的方式去表示大量而且重復(fù)行的表達(dá)式。

比如上面 grid-template-columns: 1fr 1fr 1fr; 我們可以寫成 repeat(3, 1fr) 。它的第一個(gè)參數(shù)是重復(fù)的次數(shù)，而可以為 auto-fill 和 auto-fit 。

auto-fill

如果容器有明確的大小或最大大小，則重復(fù)次數(shù)是最大可能的正整數(shù)，不會(huì)導(dǎo)致網(wǎng)格溢出其網(wǎng)格容器。如果任何重復(fù)次數(shù)都會(huì)溢出，則重復(fù)次數(shù)為1。

auto-fit

與 auto-fill 的行為相同，只是在放置網(wǎng)格項(xiàng)后，任何空的重復(fù)軌道都會(huì)折疊。

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

minmax()

定義了一個(gè)長(zhǎng)寬范圍的閉區(qū)間。它接受兩個(gè)參數(shù)，最小值 和 最大值。它返回這個(gè)區(qū)間中的值。

如 minmax(max-content, 300px) ，最大不能大于 300px

minmax(200px, 1fr) 最小不能小于 200px

fit-content()

它相當(dāng)于 min(maximum size, max(minimum size, argument)) 。參數(shù)可以是長(zhǎng)度值和百分比。

它在內(nèi)容的最小值和參數(shù)中去一個(gè)最大值，然后再在內(nèi)容的最大值中取一個(gè)最小值。

也就是當(dāng)內(nèi)容少時(shí)，它取內(nèi)容的長(zhǎng)度，如果內(nèi)容多，內(nèi)容長(zhǎng)度大于參數(shù)長(zhǎng)度時(shí)，它取參數(shù)長(zhǎng)度。

grid-template-areas

這個(gè)屬性網(wǎng)格區(qū)塊，需要和 grid-area 配合使用，它的值可以是 none 和 字符串 。

為字符串時(shí)每一個(gè)給定的字符串會(huì)生成一行，一個(gè)字符串中用空格分隔的每一個(gè)單元(cell)會(huì)生成一列。多個(gè)同名的，跨越相鄰行或列的單元稱為網(wǎng)格區(qū)塊(grid area)。非矩形的網(wǎng)格區(qū)塊是無(wú)效的。

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

grid-template-areas 字符串，關(guān)聯(lián) grid item 的 grid-area ，用它定義一片區(qū)域。

grid-template

是 grid-template-rows 、 grid-template-columns 和 grid-template-areas 的簡(jiǎn)寫。

它的值可以分三種情況：

• none
• 只有定義行和列時(shí)可以使用 rows/columns 語(yǔ)法，如 grid-template: 100px 1fr / 50px 1fr;
• 當(dāng)三個(gè)都有時(shí)，也用一個(gè) / 分隔，而且它的右邊也還是 columns ，但是它的左邊語(yǔ)法是 <line-names>? <string> <track-size>? <line-names>? 。

.page {
    grid-template: [header-top] "a a a"     [header-bottom]
                   [main-top]   "b b b" 1fr [main-bottom]
                   / auto 1fr auto;
}
/*
line-names 是可選的，自定義名稱，需要使用中括號(hào)包裹，它其實(shí)相當(dāng)于注釋
string 網(wǎng)格項(xiàng) grid-area 的關(guān)聯(lián)值
track-size 這一行的大小
*/

#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template: [header-left] "head head" 30px [header-right]
                 [main-left]   "nav  main" 1fr  [main-right]
                 [footer-left] "nav  foot" 30px [footer-right]
                 / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-column: foot;
}

grid-row-gap / row-gap

用來(lái)設(shè)置行元素之間的間隙(gutter) 大小。它的值可以是長(zhǎng)度值、百分比和 normal 。

CSS Grid Layout 起初是用 grid-row-gap 屬性來(lái)定義的，目前逐漸被 row-gap 替代。但是，為了兼容那些不支持 row-gap 屬性的瀏覽器，你需要使用帶有前綴的屬性。

.box{
    grid-row-gap: 1em;
}

grid-column-gap / column-gap

用來(lái)設(shè)置元素列之間的間隔 (gutter) 大小。它的值可以是長(zhǎng)度值、百分比和 normal 。

normal 在 多列布局 時(shí)默認(rèn)間隔為1em，其他類型布局默認(rèn)間隔為 0。

和 grid-row-gap 一樣，它漸漸被 column-gap 取代。

.page {
    grid-column-gap: 1em;
}

grid-gap / gap

是上面兩個(gè)屬性的簡(jiǎn)寫，語(yǔ)法是 row-gap column-gap 。如果沒(méi)有 column-gap 那么它將被設(shè)置成跟 row-gap 一樣的的值。

它也漸漸被 gap 取代。

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  background-color: lime;
}

隱式創(chuàng)建的行和列

css gird 會(huì)根據(jù)周圍項(xiàng)目的大小和跨度自動(dòng)調(diào)整網(wǎng)格上每個(gè)項(xiàng)目的位置。

比如：

.box {
  display: grid;
  grid-template: 25px / 100px 160px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
}

我們只定義了一行，兩列。但是我們卻有 5 個(gè)子元素。CSS網(wǎng)格決定將它們擴(kuò)展到隱式創(chuàng)建的空間，新建的隱式行中的列自動(dòng)從先前指定的 grid-template-rows 屬性繼承行高。

grid-column-start , grid-column-end , grid-row-start 和 grid-row-end 這 4 個(gè)屬性是 grid item 上的，它可以定義一個(gè) grid item 的位置，如果我們將它的位置設(shè)置的超出我們定義的網(wǎng)格，那時(shí)也會(huì)隱式創(chuàng)建行或列。

grid-auto-rows

指定了隱式創(chuàng)建行的大小。它的值可以是：

• 長(zhǎng)度值 ： px em vmax 等
• 百分比 ：相對(duì)于網(wǎng)格容器
• flex ：非負(fù)值，用單位 fr 來(lái)定義網(wǎng)格軌道大小的彈性系數(shù)。每個(gè)定義了 flex 的網(wǎng)格軌道會(huì)按比例分配剩余的可用空間
• max-content 關(guān)鍵字，表示以網(wǎng)格項(xiàng)的最大的內(nèi)容來(lái)占據(jù)網(wǎng)格軌道的
• min-content 關(guān)鍵字，表示以網(wǎng)格項(xiàng)的最大的最小內(nèi)容來(lái)占據(jù)網(wǎng)格軌道
• auto 如果該網(wǎng)格軌道為最大時(shí)，等同于 max-content ，為最小時(shí)，等同于 min-content

它的值和 grid-template-rows 是一樣的。

.box {
  display: grid;
  grid-template: 25px / 100px 160px;
  gap: 10px 20px;
  grid-auto-rows: 50px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
}

grid-auto-columns

指定了隱式創(chuàng)建的網(wǎng)格的列寬。它的取值和 grid-auto-rows 一樣。

#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

grid-auto-flow

控制著自動(dòng)布局算法怎樣運(yùn)作，精確指定在網(wǎng)格中被自動(dòng)布局的元素怎樣排列。

如果我們?cè)谝粋€(gè) div 中寫幾個(gè) div ，再對(duì)父級(jí)設(shè)置 display: grid; ，從視覺(jué)的角度可以發(fā)現(xiàn)沒(méi)什么變化。但是如果我們?cè)賹⒏讣?jí) div 加上一句 grid-auto-flow: column; 我們就發(fā)現(xiàn)現(xiàn)在子元素在一行顯示，和彈性盒子效果差不多。

grid-auto-flow 的值如下：

• row指定自動(dòng)布局算法按照通過(guò)逐行填充來(lái)排列元素，在必要時(shí)增加新行。（默認(rèn)值）
• column指定自動(dòng)布局算法通過(guò)逐列填充來(lái)排列元素，在必要時(shí)增加新列。

在這兩個(gè)關(guān)鍵字后面還可以加上 dense 關(guān)鍵字。語(yǔ)法是 [ row | column ] || dense 。

該關(guān)鍵字指定自動(dòng)布局算法使用一種“稠密”堆積算法，如果后面出現(xiàn)了稍小的元素，則會(huì)試圖去填充網(wǎng)格中前面留下的空白。這樣做會(huì)填上稍大元素留下的空白，但同時(shí)也可能導(dǎo)致原來(lái)出現(xiàn)的次序被打亂。

如果省略它，使用一種「稀疏」算法，在網(wǎng)格中布局元素時(shí)，布局算法只會(huì)「向前」移動(dòng)，永遠(yuǎn)不會(huì)倒回去填補(bǔ)空白。這保證了所有自動(dòng)布局元素「按照次序」出現(xiàn)，即使可能會(huì)留下被后面元素填充的空白。

grid-auto-flow: row;

grid-auto-flow: row dense;

 grid

grid 是 CSS 簡(jiǎn)寫屬性，它幾乎包括上面提到的所有屬性（除了 gap ）。

與其他簡(jiǎn)寫屬性同樣，若有次級(jí)屬性未被聲明，其將使用初始值。另外，盡管此簡(jiǎn)寫聲明無(wú)法設(shè)置網(wǎng)格的槽（gutter），槽會(huì)被該聲明重置。

它的值可以分為 3 類

grid-template

就和 grid-template 簡(jiǎn)寫一樣，如 grid: [linename1] "a" 100px [linename2];

grid-template-rows / [ auto-flow && dense? ] grid-auto-columns?

grid-template-rows 設(shè)置行高（ grid-template-columns 被設(shè)置為 none ）， / 后面的 auto-flow 必須要寫（ grid-auto-flow 被設(shè)置為 column ），最后 grid-auto-columns 置明確該如何自動(dòng)重復(fù)列軌道（ grid-auto-rows 屬性設(shè)為 auto ）。

如 grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;

[ auto-flow && dense? ] grid-auto-rows? / grid-template-columns

這種寫法和上種寫法相反，這種是設(shè)置 grid-template-columns （ rows 屬性為 none ）?？蛇x的設(shè)置 grid-auto-rows 屬性（ columns 為 auto ）

如 grid: auto-flow dense / 30%;

網(wǎng)格項(xiàng)上的屬性

 grid-row-start, grid-row-end, grid-column-start, grid-column-end

分別指定 grid item 在網(wǎng)格中的行起始位，行結(jié)束位，列起始位，列結(jié)束位。

這就需要了解之前介紹的網(wǎng)格線概念，橫線（row）從上到下遞增，豎線（column）從做到右遞增，都是從 1 開(kāi)始算。

它們可以取如下值：

auto 表示自動(dòng)放置，自動(dòng)跨度或默認(rèn) span 為 1 數(shù)字 表示網(wǎng)格線 span 數(shù)字 表示跨越幾個(gè)格子， 數(shù)字 小于等于 0 無(wú)效。如果超過(guò)網(wǎng)格大小會(huì)隱式創(chuàng)建行或列。

它和 table 有點(diǎn)相似

如果設(shè)置的位置超出指定大小，會(huì)得到不穩(wěn)定的效果，應(yīng)該避免這種情況。

.box {
  display: grid;
  grid: 100px 100px / 100px 100px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
}
.box1 {
  grid-column-start: span 5;
}

grid-row, grid-column

grid-row 和 grid-column 分別是上面 4 個(gè)屬性簡(jiǎn)寫。

它們值的語(yǔ)法是 start / end 。如果只有一個(gè)值那么它是 start ， end 值為默認(rèn) auto 。

當(dāng)列數(shù)未知時(shí)，可以使用 -1 讓它一直擴(kuò)展到網(wǎng)格末尾。

使用負(fù)值

grid-area

上面我們已經(jīng)展示了 grid-area 和 grid-template-areas 結(jié)合的用法。 grid-area 其實(shí)是 grid-row-start 、 grid-column-start 、 grid-row-end 和 grid-column-end 的簡(jiǎn)寫。

它的默認(rèn)值是 grid-area: auto;

如果設(shè)置了 4 個(gè)值的話那么它的順序是

grid-area: row-start / column-start / row-end / column-end;

如果設(shè)置了 3 個(gè)值，那么最后一個(gè)為 auto

如果設(shè)置了 2 個(gè)值，那么后兩個(gè)為 auto

如果設(shè)置了 1 個(gè)值，那么后三個(gè)為 auto

如果第一項(xiàng)是 自定義表示 ，那么被忽略的都為自定義表示

.box1 {
  grid-area: a / a;
}

/* 相當(dāng)于 */

.box1 {
    grid-row-start: a;
    grid-column-start: a;
    grid-row-end: a;
    grid-column-end: a;
}

網(wǎng)格項(xiàng)的內(nèi)容對(duì)齊

我們可以使用 align-self 和 justify-self 調(diào)整 grid item 的內(nèi)容對(duì)齊方式。

align-self 用來(lái)垂直方向?qū)R， justify-self 用來(lái)水平方向?qū)R。

align-self

flex 布局也可以使用這個(gè)屬性。它常用如下 3 個(gè)值：

1. start: 內(nèi)容頂端對(duì)齊
2. center: 內(nèi)容垂直居中
3. end: 內(nèi)容底部對(duì)齊

justify-self

它常用如下 3 個(gè)值：

• start / left : 內(nèi)容左對(duì)齊
• cneter : 內(nèi)容水平居中
• end / right : 內(nèi)容右對(duì)齊

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論