先看思維導(dǎo)圖

起步

首先搭好基本的結(jié)構(gòu)

<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>

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

給每個(gè)項(xiàng)目設(shè)置樣式以區(qū)分

.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; }

然后開始了，先把容器設(shè)為display: grid

我們看到每個(gè)項(xiàng)獨(dú)占一行，因?yàn)槟J(rèn)是塊級(jí)元素，如果想變?yōu)樾袃?nèi)，要設(shè)置display: inline-grid，廠商前綴自己按照瀏覽器加上，我使用的是Chrome，不需要。

這兩個(gè)設(shè)置跟flex、inline-flex是相似的。

接下來就見真格了，以下先是設(shè)置網(wǎng)格布局容器上的屬性。

grid-template-columns, grid-template-rows

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

數(shù)值

#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; }

看看如果設(shè)置的配置和實(shí)際元素?cái)?shù)量不一致會(huì)怎么辦

#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變?yōu)閏olumn

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

可以得出結(jié)論就是前面row * col個(gè)元素是遵循設(shè)置內(nèi)容，然后按照排列次序以及排列方向，延續(xù)row或者column的設(shè)置值。

repeat()

這個(gè)函數(shù)為懶人設(shè)置，表示重復(fù)多少次

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

repeat()里第二個(gè)參數(shù)還能指定多個(gè)項(xiàng)

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

第一個(gè)值也可以不指定具體的數(shù)字，而用auto-fill表示盡量排下去，有點(diǎn)float的味道，此時(shí)不能確定另一個(gè)維度的設(shè)置會(huì)用到幾個(gè)。

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

此時(shí)我把瀏覽器拉寬，排下來只有三行了，就只會(huì)用到grid-template-rows里的三項(xiàng)值。

fr

這個(gè)關(guān)鍵字就相當(dāng)于flex布局里的flex-grow，表示各元素之間的比例。

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

配合絕對(duì)數(shù)值也是和flex里一樣的

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

minmax()

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

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

此時(shí)500px是大于1fr的，我們看到

說明此時(shí)布局系統(tǒng)優(yōu)先滿足最小值的設(shè)定。

auto

auto關(guān)鍵詞表示接盤，它就是一個(gè)接盤俠——把剩下的空間都分給我。

#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; }

網(wǎng)格線名稱

在這里還能指定網(wǎng)格線的名稱，但此時(shí)還排不上用場(chǎng)，注意實(shí)際的網(wǎng)格線數(shù)要+1，四個(gè)格子就要有五根線。

#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

它們用來設(shè)置網(wǎng)格之間的間隙，一般在網(wǎng)格布局中都會(huì)有這項(xiàng)設(shè)置，下圖是antd的網(wǎng)格組件

#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

這個(gè)屬性和剛才指定網(wǎng)格線類似，它是給區(qū)塊指定名字，比如

#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"; }

如果某個(gè)區(qū)塊不需要名字，可以指定.。

注意設(shè)置了區(qū)域名字后，區(qū)域兩邊的線會(huì)被自動(dòng)命名，比如caocao的起始位置的水平網(wǎng)格線和垂直網(wǎng)格線叫做caocao-start，終止位置的水平網(wǎng)格線和垂直網(wǎng)格線叫做caocao-end。

grid-auto-flow

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

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

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

假設(shè)我們?cè)?和2上設(shè)置寬度

#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; }

此時(shí)的效果是

由于區(qū)塊2另起了一行，區(qū)塊1的一行都被空著，如果設(shè)置

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

沒有比見縫插針這個(gè)詞更適合當(dāng)前的場(chǎng)景了。

justify-items，align-items，place-items

justify-items針對(duì)單元項(xiàng)里的內(nèi)容的水平位置，align-items針對(duì)單元項(xiàng)里的內(nèi)容的垂直位置，它們都能取如下的值

• start
• end
• center
• stretch

設(shè)置成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是單元項(xiàng)在容器里的水平位置，align-content是單元項(xiàng)在容器里的垂直位置，它們可以取如下的值

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

讓人想起了flex布局。

也試兩個(gè)看看

#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

它們用來指定超出范圍的那些單元項(xiàng)的設(shè)置，之前我們已經(jīng)試過超出設(shè)置范圍的單元項(xiàng)是什么樣子的，用這兩個(gè)配置能對(duì)它們多一層控制，比如

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

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

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

grid-template, grid

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

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

以下屬性設(shè)置在單元項(xiàng)上

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

它們用來設(shè)置行的起點(diǎn)、終點(diǎn)和列的起點(diǎn)、終點(diǎn)，注意CSS里的起點(diǎn)都是以1開始的。

修改第一個(gè)單元項(xiàng)

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

針對(duì)這第一個(gè)單元項(xiàng)，還能再狠一點(diǎn)

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

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

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

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

也能使用span來簡(jiǎn)單的指定跨越幾個(gè)單元格。

.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是以上的合并簡(jiǎn)寫。比如

.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就會(huì)用到剛才指定的區(qū)塊名字，比如剛才曾經(jīng)指定

#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"; }

現(xiàn)在可以設(shè)置第一個(gè)區(qū)塊為

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

那最終第一個(gè)區(qū)塊就占據(jù)了名字為caocao的區(qū)域

當(dāng)然也能用數(shù)字來指定

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

justify-self, align-self, place-self

這幾個(gè)跟flex布局里的align-self很相似，都是調(diào)整單元項(xiàng)在父級(jí)容器里的位置。

justify-self調(diào)整單元項(xiàng)在父級(jí)容器里的水平位置，align-self調(diào)整單元項(xiàng)在父級(jí)容器里的垂直位置，place-self理所當(dāng)然是它們的合并方式，可以取如下的值

• start
• end
• center
• stretch

最后做一個(gè)綜合的例子——華容道

選用最傻瓜的方式——指定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">關(guān)羽</div><div class="item item-10">張飛</div></div></body> </html> 與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。