先看思維導圖

起步

首先搭好基本的結構

<div id="container"><div class="item item-1">1</div><div class="item item-2">2</div><div class="item item-3">3</div><div class="item item-4">4</div><div class="item item-5">5</div><div class="item item-6">6</div><div class="item item-7">7</div><div class="item item-8">8</div><div class="item item-9">9</div><div class="item item-10">10</div><div class="item item-11">11</div><div class="item item-12">12</div><div class="item item-13">13</div><div class="item item-14">14</div><div class="item item-15">15</div><div class="item item-16">16</div> </div>

這里我覺得一個問題是，grid布局下面的所有元素都是同等的，實際中可能還存在層級的關系，直接使用略微有不滿足語義化的缺陷，當然開發者是可以自己組建層級，然后再針對每個層級繼續布局下去的 。

給每個項目設置樣式以區分

.item {font-size: 1em;text-align: center; } .item-1 {background-color: #b71c1c; } .item-2 {background-color: #c2185b; } .item-3 {background-color: #8e24aa; } .item-4 {background-color: #651fff; } .item-5 {background-color: #1a237e; } .item-6 {background-color: #2196f3; } .item-7 {background-color: #039be5; } .item-8 {background-color: #18ffff; } .item-9 {background-color: #009688; } .item-10 {background-color: #00c853; } .item-11 {background-color: #b2ff59; } .item-12 {background-color: #eeff41; } .item-13 {background-color: #fbc02d; } .item-14 {background-color: #ff6f00; } .item-15 {background-color: #e65100; } .item-16 {background-color: #6d4c41; }

然后開始了，先把容器設為display: grid

我們看到每個項獨占一行，因為默認是塊級元素，如果想變為行內，要設置display: inline-grid，廠商前綴自己按照瀏覽器加上，我使用的是Chrome，不需要。

這兩個設置跟flex、inline-flex是相似的。

接下來就見真格了，以下先是設置網格布局容器上的屬性。

grid-template-columns, grid-template-rows

可以看到如果不給每個項設置寬高就根本沒法看，所以第一步要設置grid-template-columns和grid-template-rows。

數值

#container {display: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px; }

也可以使用百分比

#container {display: grid;grid-template-columns: 25% 25% 25% 25%;grid-template-rows: 100px 100px 100px 100px; }

看看如果設置的配置和實際元素數量不一致會怎么辦

#container {display: grid;grid-template-columns: 25% 25% 25%;grid-template-rows: 100px 100px 100px; }

如果是

#container {display: grid;grid-template-columns: 25% 25%;grid-template-rows: 100px 100px 100px; }

如果是

#container {display: grid;grid-template-columns: 25% 55%;grid-template-rows: 50px 100px 200px; }

如果把方向從row變為column

#container {display: grid;grid-auto-flow: column;grid-template-columns: 25% 25%;grid-template-rows: 100px 100px 100px; }

可以得出結論就是前面row * col個元素是遵循設置內容，然后按照排列次序以及排列方向，延續row或者column的設置值。

repeat()

這個函數為懶人設置，表示重復多少次

#container {display: grid;grid-template-columns: repeat(3, 25%) 100px;grid-template-rows: repeat(2, 100px) repeat(2, 150px); }

repeat()里第二個參數還能指定多個項

#container {display: grid;grid-template-columns: repeat(2, 15% 25%);grid-template-rows: repeat(2, 100px 150px); }

第一個值也可以不指定具體的數字，而用auto-fill表示盡量排下去，有點float的味道，此時不能確定另一個維度的設置會用到幾個。

#container {display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: 50px 100px 150px 200px 250px; /*不知道可能用到幾個 */ }

此時我把瀏覽器拉寬，排下來只有三行了，就只會用到grid-template-rows里的三項值。

fr

這個關鍵字就相當于flex布局里的flex-grow，表示各元素之間的比例。

#container {display: grid;grid-template-columns: 1fr 2fr 3fr 4fr;grid-template-rows: 50px 100px 150px 200px; }

配合絕對數值也是和flex里一樣的

#container {display: grid;grid-template-columns: 1fr 2fr 3fr 100px;grid-template-rows: 50px 100px 150px 200px; }

minmax()

這個函數就類比于設置min-width和max-width。下面我設置了個特殊情況，就是最小值要比最大值還來的大。

#container {display: grid;grid-template-columns: 1fr 1fr minmax(500px, 1fr) 1fr;grid-template-rows: 50px 100px 150px 200px; }

此時500px是大于1fr的，我們看到

說明此時布局系統優先滿足最小值的設定。

auto

auto關鍵詞表示接盤，它就是一個接盤俠——把剩下的空間都分給我。

#container {display: grid;grid-template-columns: 1fr 1fr auto 1fr;grid-template-rows: 50px 100px 150px 200px; }

#container {display: grid;grid-template-columns: 100px 100px auto auto;grid-template-rows: 50px 100px 150px 200px; }

網格線名稱

在這里還能指定網格線的名稱，但此時還排不上用場，注意實際的網格線數要+1，四個格子就要有五根線。

#container {display: grid;grid-template-columns: [no1] 100px [no2] 100px [no3] 100px [no4] 100px [no5];grid-template-rows: 50px 100px 150px 200px; }

grid-row-gap，grid-column-gap，grid-gap

它們用來設置網格之間的間隙，一般在網格布局中都會有這項設置，下圖是antd的網格組件

#container {display: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-row-gap: 20px;grid-column-gap: 10px;/* 或者grid-gap: 20px 10px;*/ }

grid-template-areas

這個屬性和剛才指定網格線類似，它是給區塊指定名字，比如

#container {display: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-template-areas:"caocao caocao zhaoyun machao""caocao caocao zhaoyun machao""guanyu guanyu zhangfei zhangfei"; }

如果某個區塊不需要名字，可以指定.。

注意設置了區域名字后，區域兩邊的線會被自動命名，比如caocao的起始位置的水平網格線和垂直網格線叫做caocao-start，終止位置的水平網格線和垂直網格線叫做caocao-end。

grid-auto-flow

這個屬性用來指定網格是先橫向排列還是先縱向排列，跟flex布局里的flex-direction類似。

#container {display: grid;grid-auto-flow: column;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px; }

這個屬性上還能設置dense，要用一個具體的例子來說明這個屬性的作用。

假設我們在1和2上設置寬度

#container {display: grid;grid-auto-flow: row;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px; }.item {font-size: 1em;text-align: center; }.item-1 {grid-column-start: 1;grid-column-end: 3;background-color: #b71c1c; }.item-2 {grid-column-start: 1;grid-column-end: 3;background-color: #c2185b; }

此時的效果是

由于區塊2另起了一行，區塊1的一行都被空著，如果設置

#container {display: grid;grid-auto-flow: row dense;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px; }

沒有比見縫插針這個詞更適合當前的場景了。

justify-items，align-items，place-items

justify-items針對單元項里的內容的水平位置，align-items針對單元項里的內容的垂直位置，它們都能取如下的值

• start
• end
• center
• stretch

設置成end看看效果

#container {display: grid;justify-items: end;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px; }

place-items就是justify-items和align-items的組合。

justify-content, align-content, place-content

justify-content是單元項在容器里的水平位置，align-content是單元項在容器里的垂直位置，它們可以取如下的值

• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly

讓人想起了flex布局。

也試兩個看看

#container {display: grid;justify-content: space-around;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px; }

改成end

同理place-content也是justify-content和align-content的組合。

grid-auto-columns，grid-auto-rows

它們用來指定超出范圍的那些單元項的設置，之前我們已經試過超出設置范圍的單元項是什么樣子的，用這兩個配置能對它們多一層控制，比如

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

超出3 * 3 = 9個范圍之后，多出來的單元項，將它們的高度設置為50px，可以將下圖和上面的例子對比一下。

對于那些設置了位置，使之不在grid-template-columns和grid-template-rows范圍之內的單元項(比如設置grid-column-start、grid-column-end)，也被這兩個配置影響。

grid-template, grid

跟flex一樣，這兩個也是合并的設置，反正我是記不住的

grid-template= grid-template-column + grid-template-rows + grid-template-areas

grid = grid-template-rows + grid-template-columns + grid-template-ares + grid-auto-rows + grid-auto-columns + grid-auto-flow

以下屬性設置在單元項上

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

它們用來設置行的起點、終點和列的起點、終點，注意CSS里的起點都是以1開始的。

修改第一個單元項

.item-1 {background-color: #b71c1c;grid-column-start: 2;grid-column-end: 5; }

針對這第一個單元項，還能再狠一點

.item-1 {background-color: #b71c1c;grid-column-start: 2;grid-column-end: 4;grid-row-start: 2;grid-row-end: 4; }

可見是先把單元項1給排好，然后其他的依次按照grid-auto-flow的配置來排列。

另外剛才指定的網格線名稱也能在這里使用了。

.item-1 {background-color: #b71c1c;grid-column-start: no2;grid-column-end: no5; }

也能使用span來簡單的指定跨越幾個單元格。

.item-1 {background-color: #b71c1c;grid-column-start: span 2; }

或者

.item-1 {background-color: #b71c1c;grid-column-start: no2;grid-column-end: span 2; }

grid-column和grid-row是以上的合并簡寫。比如

.item-1 {background-color: #b71c1c;grid-column: 1 / 3;/* 與以下相等grid-column-start: 1;grid-column-end: 3;*//* 與以下相等grid-column: 1 / span 2;*/ }

grid-area

grid-area就會用到剛才指定的區塊名字，比如剛才曾經指定

#container {display: grid;grid-template-columns: [no1] 100px [no2] 100px [no3] 100px [no4] 100px [no5];grid-template-rows: 100px 100px 100px 100px;grid-template-areas:"caocao caocao zhaoyun machao""caocao caocao zhaoyun machao""guanyu guanyu zhangfei zhangfei"; }

現在可以設置第一個區塊為

.item-1 {background-color: #b71c1c;grid-area: caocao; }

那最終第一個區塊就占據了名字為caocao的區域

當然也能用數字來指定

.item-1 {grid-area: 1 / 1 / 3 / 3; }

justify-self, align-self, place-self

這幾個跟flex布局里的align-self很相似，都是調整單元項在父級容器里的位置。

justify-self調整單元項在父級容器里的水平位置，align-self調整單元項在父級容器里的垂直位置，place-self理所當然是它們的合并方式，可以取如下的值

• start
• end
• center
• stretch

最后做一個綜合的例子——華容道

選用最傻瓜的方式——指定grid-area

<!DOCTYPE html> <html><head><title>華容道</title><style>#container {display: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px 100px;grid-template-areas:"zhaoyun caocao caocao huangzhong""zhaoyun caocao caocao huangzhong""zu1 machao . zu2""zu3 machao . zu4""guanyu guanyu zhangfei zhangfei";}.item {font-size: 1em;display: flex;align-items: center;justify-content: center;color: white;}.item-1 {background-color: #b71c1c;grid-area: zhaoyun;}.item-2 {background-color: #c2185b;grid-area: caocao;}.item-3 {background-color: #8e24aa;grid-area: huangzhong;}.item-4 {background-color: #651fff;grid-area: zu1;}.item-5 {background-color: #651fff;grid-area: zu2;}.item-6 {background-color: #009688;grid-area: zu3;}.item-7 {background-color: #00c853;grid-area: zu4;}.item-8 {background-color: #2196f3;grid-area: machao;}.item-9 {background-color: #546e7a;grid-area: guanyu;}.item-10 {background-color: #e65100;grid-area: zhangfei;}</style></head><body><div id="container"><div class="item item-1">趙云</div><div class="item item-2">曹操</div><div class="item item-3">黃忠</div><div class="item item-4">卒</div><div class="item item-5">卒</div><div class="item item-6">卒</div><div class="item item-7">卒</div><div class="item item-8">馬超</div><div class="item item-9">關羽</div><div class="item item-10">張飛</div></div></body> </html> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的grid布局浏览器兼容_CSS Grid布局尝试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。