grid介紹
針對于Web布局而言，Grid布局將是Web布局的神器，他改變了以往任何一種布局方式或者方法。不管以前采用float或者flex彈性布局可以說都是一種一維布局，而Grid的最大特色就是基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶布局界面的設計。

1.啟用grid容器
我們使用display屬性來定義一個網(wǎng)格容器，他的grid的值決定了容器展現(xiàn)為快級還是內(nèi)聯(lián)形式。一旦啟用了網(wǎng)格容器，它的所有子元素都進入grid文檔流，稱為網(wǎng)格子項。

display:grid | inline-grid | subgrid 屬性值說明

grid	定義一個塊級的網(wǎng)格容器
inliner-grid	定義一個內(nèi)聯(lián)的網(wǎng)格容器
subgrid	定義一個繼承其父級網(wǎng)格容器的行和列的大小的網(wǎng)格容器，它是其父級網(wǎng)格容器的一個子項
提示：	column、float、clear、和vertical-align對網(wǎng)格容器沒有效果

2、網(wǎng)格容器的屬性

2.1 grid-template-columns/grid-template-rows
用法：

1.grid-template-columns:<track-size>...|<line-name> <track-size>...; 2.grid-template-rows:<track-size>...|<line-name><track-size>...;

track-size:定義網(wǎng)格單元的寬高，其單位可以是一個長度(如px、em、rem、vw、vh)或百分比，也可以是網(wǎng)格中自由空間的份數(shù)(單位為fr)。
line-name:定義網(wǎng)線的名字，它不是必須值。可以選擇任意名字，當沒有顯示設定時，它的名字以數(shù)字表示。

實例：
css:

.container{width: 500px;height: 500px;display: grid;grid-template-rows: 33% 33% 33%;grid-template-columns: 33% 33% 33%;}.container div{border: 1px solid #000;}

html:

<div class="container"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div>

呈現(xiàn)的效果：

也可以通過命名來寫效果一樣，多個命名的話要用空格隔開

.container{grid-template-row[row1-start] 25% [row1-end row2-start] 25% [row2-end];}

如果你定義了容器的重復部分，你可以使用repate()方法來生成多個相同值

.container{gird-template-columns:repeat(3, 33%);/* 等價于*/ .container{grid-template-columns:33% 33% 33%}

特殊單元：frfr單元允許你將網(wǎng)格容器中的自由空間設置為一個份數(shù)：

.container{grid-template-columns：repeat(3, 1fr);grid-template-row:repeat(3, 1fr); }

在上面的代碼中， 將網(wǎng)格容器的每個子項設置為三分之一。
上邊這個平均分成三份比設為33%要好很多，效果圖也差不多。
tips:自由空間是在固定子項確定后開始計算的。

2.2 grip-template-areas
grid-template-areas可以配合grid-area定義一個顯示的網(wǎng)格區(qū)域。 grid-template-areas定義網(wǎng)格區(qū)域，然后使用grid-area調(diào)用聲明好的網(wǎng)格區(qū)域名稱來放置對應的網(wǎng)格項目。
用法:

1.grid-template-areas:"<grid-area-name> | .|none|..." "..."

grid-area-name:在grid-area中指定的網(wǎng)格區(qū)域名字
. :一個句點表示一個空的網(wǎng)格單元
none沒有網(wǎng)格區(qū)域被定義
實例：
css:

.container{width: 500px;height: 200px;margin-top:20px;display: grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;grid-template-areas: "header header . footer""main main . sidebar""main main . sidebar";}.item-a{grid-area: header;background-color: black;}.item-b{grid-area: main;background-color: blue;}.item-c{grid-area: sidebar;background-color: #00bdd4;}.item-d{grid-area: footer;background-color: #ffd89b;}

html:

<div class="container"><div class="item-a"></div><div class="item-b"></div><div class="item-c"></div><div class="item-d"></div> </div>

效果顯示

2.3 grid-column-grap/grid-row-gap/grid-gap
指定網(wǎng)格線的大小，也可以說是網(wǎng)格子項之間的間距。用法：

grid-column-grap: <line-size>grid-row-gap:<line-size>

line-size長度值
grid-gap是grid-column-gap和grid-row-gap的簡稱：

grid-gap:<grid-column-gap> <grid-row-gap>

如果只有一個值，grid-row-gap的值將和grid-column-gap一樣。

實例：

css:

.container{width: 500px;height: 500px;display: grid;grid-template-columns:repeat(3, 1fr) ;grid-template-rows: repeat(3, 1fr);grid-column-gap: 2%;grid-row-gap: 2%;}.container div{border: 1px solid black;}

html:

<div class="container"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div>

效果呈現(xiàn)：

2.4 justify-items/align-items

justify-items讓網(wǎng)格子項的內(nèi)容和列軸對齊（align-item則相反，是和行軸對齊）,這個值對容器里面的所有網(wǎng)格子項都有用，flex里沒有justify-items屬性

用法:

justify-items:start | end | center | stretch 值說明

start	內(nèi)容和網(wǎng)格區(qū)域的左邊對齊
end	內(nèi)容和網(wǎng)格區(qū)域的右邊對齊
center	內(nèi)容和網(wǎng)格區(qū)域的中間對齊
stretch	填充整個網(wǎng)格區(qū)域的寬度（默認值）

align-items
讓網(wǎng)格子項的內(nèi)容和行軸對齊，這個值對容器里面的所有網(wǎng)格子項都有用

align-items:start | end | center | stretch; 屬性值說明

start	內(nèi)容和網(wǎng)格區(qū)域的頂部對齊
end	內(nèi)容和網(wǎng)格區(qū)域的底部對齊
center	內(nèi)容和網(wǎng)格區(qū)域的中間對齊
stretch	填充整個網(wǎng)格區(qū)域的高度（默認值）

2.5 justify-content/align-content
justify-content如果用像px非彈性單位定義的話，總網(wǎng)格區(qū)域大小有可能小于網(wǎng)格容器，這時候你可以設置網(wǎng)格的對齊方式（垂直于列網(wǎng)格線對齊）。

justify-content:start | end | center | stretch | space-around | space-between | space-evenly; 屬性值說明

start	左對齊
end	右對齊
center	居中對齊
strectch	填充網(wǎng)格容器
space-around	在每個網(wǎng)格子項中間放置均等的空間，在始末兩端只有一半大小
space-between	兩邊對齊，在每個網(wǎng)格子項中間放置均等的空間，在始末兩端沒有空間
space-evenly	網(wǎng)格間隔相等，包括始末兩端

align-content如果用像px非彈性單位定義的話，總網(wǎng)格區(qū)域大小有可能小于網(wǎng)格容器，這時候你可以設置網(wǎng)格的對齊方式（垂直于行網(wǎng)格線對齊）。

align-content: start | end | center | stretch | space-around | space-between | space-evenly; 屬性值說明

start	頂部對齊
end	底部對齊
center	居中對齊
stretch	填充網(wǎng)格容器
space-around	在每個網(wǎng)格子項中間放置均等的空間，在始末兩端只有一半大小
space-between	上下對齊，在每個網(wǎng)格子項中間放置均等的空間，在始末兩端沒有空間
space-evenly	在每個網(wǎng)格子項中間放置均等的空間，包括始末兩端

2.6 grid-auto-columns/grid-auto-rows
自動生成隱式網(wǎng)格軌道（列和行），當你定位網(wǎng)格項超出網(wǎng)格容器范圍時，將自動創(chuàng)建隱式網(wǎng)格軌道。

grid-auto-columns: <track-size> grid-auto-rows:<track-size>

track-size：可以是一個長度，百分比或者是一個網(wǎng)格中自由空間的份數(shù)（通過使用fr單位）。

為了說明隱式網(wǎng)格軌跡如何被創(chuàng)建，思考一下這個：

.container{display:grid;`在這里插入代碼片`gird-template-columns:60px 60px;grid-template-rows:90px 90px;}

我們創(chuàng)建了一個2*2的網(wǎng)格

但現(xiàn)在想象你使用grid-column和grid-row來定位你的網(wǎng)格子項，就像這樣：

.item-a{grid-column:1/2;grid-row:2/3;}.item-b{grid-column:5/6;grid-row:2/3;

我們告訴.item-b在第五列網(wǎng)格線開始第6列網(wǎng)格線結束，但我們還沒有定義第5或者第6列。因為我們引用的線不存在，0寬度的隱式網(wǎng)格軌跡將被創(chuàng)建來填充
這些空缺。我們可以使用grid-auto-columns和grid-auto-rows來指定這些隱式網(wǎng)格軌跡的寬度：

.container{grid-auto-columns:60px;}

實例：
CSS:

.container{display:gird;grid-template-columns:60px 60px;grid-template-rows:90px 90px;grid-auto-columns:60px;} .item1{background:red;grid-column:1/2;grid-row:2/3;} .item2{background:green;grid-column:5/6;grid-row:2/3;}

html:

<div class="container"><div class="item1"></div><div class="item2"></div> </div>

效果圖：

2.7 grid-auto-flow

在沒有設置網(wǎng)格項的位置時，這個屬性控制網(wǎng)格項怎么排列

grid-auto-flow:row | column | row dense | column dense; 屬性值說明

row	按照行一次從左到右排列
column	按照列依此從上到下排列
–	–
dense	按先后順序排列

實例：
css:grid-auto-flow設為row

.container{display: grid;grid-template-columns: 200px 200px 200px 200px 200px;grid-template-rows: 200px 200px;grid-auto-flow:column;color:#fff;}.item1{grid-column: 1;grid-row:1 / 3;background-color: red;}.item2{background-color: blue;}.item3{background-color: black;}.item4{background-color: blueviolet;}.item5{grid-column: 5;grid-row:1/3;background-color: bisque;}

html:

<div class="container"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div> </div>

效果展示：

grid-auto-flow設為column

2.8 grid
grid是一種簡寫形式：

grid:none|<grid-template-rows>|<grid-template-columns>| <grid-auto-flow> [<grid-auto-row> [<grid-auto-columns>]];

3、網(wǎng)格子項的屬性
3.1、grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row
通過網(wǎng)格線來定義網(wǎng)格項的位置。grid-column-start、grid-row-start定義網(wǎng)格項的開始位置，grid-column-end、grid-row-end定義網(wǎng)格項的結束位置。

grid-column-start: <number> | <name> | span <number> | span <name> | auto ; grid-column-end: <number> | <name> | span <number> | span <name> | auto ; grid-row-start: <number> | <name> | span <number> | span <name> | auto ; grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

• number|name:可以是一個數(shù)字以適用被標記了數(shù)字號的網(wǎng)格線，或者是一個名字以適用命名了的網(wǎng)格線
• span<number>:子項將跨越指定數(shù)字的網(wǎng)格軌跡
• span<name>:子項將跨越指定名字之前的網(wǎng)格線
• auto：自動布局，自動跨越或者默認跨越一個
  實例：
  css:

#container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}.item {font-size: 4em;text-align: center;border: 1px solid #e5e4e9;}.item-1 {background-color: #ef342a;grid-column-start: 2;grid-column-end: 4;}.item-2 {background-color: #f68f26;}.item-3 {background-color: #4ba946;}.item-4 {background-color: #0376c2;}.item-5 {background-color: #c077af;}.item-6 {background-color: #f8d29d;}.item-7 {background-color: #b5a87f;}.item-8 {background-color: #d0e4a9;}.item-9 {background-color: #4dc7ec;}

html：

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

呈現(xiàn)效果：

上圖中，只指定了1號項目的左右邊框，沒有指定上下邊框，所以會采用默認位置，即上邊框是第一根水平網(wǎng)格線，下邊框是第二根水平網(wǎng)格線。

除了1號項目以外，其他項目都沒有指定位置，由瀏覽器自動布局，這時它們的位置由容器的grid-auto-flow屬性決定，這個屬性的默認值是row，因此會"先行后列"進行排列。讀者可以把這個屬性的值分別改成column、row dense和column dense，看看其他項目的位置發(fā)生了怎樣的變化。

.item-1 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4; }

這四個屬性的值，除了指定為第幾個網(wǎng)格線，還可以指定為網(wǎng)格線的名字。

.item-1 {grid-column-start: header-start;grid-column-end: header-end; }

上面代碼中，左邊框和右邊框的位置，都指定為網(wǎng)格線的名字。

這四個屬性的值還可以使用span關鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網(wǎng)格。

.item-1 {grid-column-start: span 2; }

上面代碼表示，1號項目的左邊框距離右邊框跨越2個網(wǎng)格

這與下面的代碼效果完全一樣。

.item-1{grid-column-end:span 2;}

使用這四個屬性，如果產(chǎn)生了項目的重疊，則使用z-index屬性指定項目的重疊順序。

3.2 grid-column屬性/grid-row屬性
grid-column屬性是grid-column-start和grid-column-end的合并簡寫
grid-row-start屬性和grid-row-end的合并簡寫形式。

.item{grid-column: /;grid-row: / ;

實例：

.item-1 {grid-column: 1 / 3;grid-row: 1 / 2; } /* 等同于 */ .item-1 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2; }

上面代碼中，項目item-1占據(jù)第一行，從第一根列線到第三根列線。

這兩個屬性之中，也可以使用span關鍵字，表示跨越多少個網(wǎng)格。

.item-1 {background: #b03532;grid-column: 1 / 3;grid-row: 1 / 3; } /* 等同于 */ .item-1 {background: #b03532;grid-column: 1 / span 2;grid-row: 1 / span 2; }

上面代碼中，項目item-1占據(jù)的區(qū)域，包括第一行 + 第二行、第一列 + 第二列。

斜杠以及后面的部分可以省略，默認跨越一個網(wǎng)格

.item-1 {grid-column: 1;grid-row: 1; }

4.grid-area屬性
grid-area屬性指定項目放在哪一個區(qū)域。

#container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c''d e f''g h i';} .item-1{grid-area: e;}

grid-area屬性還可用作grid-row-start、grid-column-start、grid-row-end、grid-coloumn-end 的合并形式，直接確定項目的位置。

.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>; }

實例：

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

效果：

總結

以上是生活随笔為你收集整理的网格布局---grid的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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