CSS中g(shù)ap并不是新的屬性，在CSS3新特性中多列布局為其添加了一個(gè)新能力。間隙屬性除了運(yùn)用在CSS柵格之外，CSS3新特性中彈性布局同樣可以使用。

簡(jiǎn)介

Grid 布局是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局，也是唯一的二維布局方案，利用grid布局可以很輕松的實(shí)現(xiàn)很多的網(wǎng)頁(yè)布局

gird布局很強(qiáng)大，采用網(wǎng)格布局的區(qū)域，稱為"容器"（container）。容器內(nèi)部子元素，稱為"項(xiàng)目"（item），即container -> item

注意：Grid 布局只對(duì)項(xiàng)目生效，項(xiàng)目只能是容器的一級(jí)子元素，不包含項(xiàng)目的子元素

grid相關(guān)屬性

下面從容器屬性和項(xiàng)目屬性兩大塊來(lái)記錄grid布局中的相關(guān)屬性

• 顯式網(wǎng)格屬性： grid-template-rows、grid-template-columns 和 grid-template-areas。
• 隱式網(wǎng)格屬性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
• 間距屬性： grid-column-gap 和 grid-row-gap。

使用網(wǎng)格布局后，項(xiàng)目的float、display: inline-block、display:
table-cell、vertical-align和column-*等設(shè)置都將失效。

間隙屬性

• gap：定義柵格布局的行與列間隙的尺寸。
• row-gap：定義行間隙的尺寸。
• column-gap：定義列間隙的尺寸。
• grid-gap：定義柵格布局中行與列間隙的尺寸。
• grid-row-gap：定義柵格布局中行間隙的尺寸。
• grid-column-gap：定義柵格布局中列間隙的尺寸。

grid屬性：

• grid-template-rows/columns：規(guī)定列和行的尺寸。
• grid-template-areas：規(guī)定使用特定命名的柵格布局。
• grid-auto-rows/columns：規(guī)定列和行的自動(dòng)尺寸。
• grid-auto-flow：指定在柵格布局中元素怎樣自動(dòng)布局排列。

注意：CSS柵格布局起初是用grid-gap屬性來(lái)定義的，目前逐漸被gap替代。

Grid 布局的使用方法

塊級(jí)容器（寬度撐滿整行）時(shí),容器獨(dú)占一行

display: grid;

下圖是display: grid的效果：

行內(nèi)容器（寬度隨內(nèi)容自適應(yīng)）時(shí)

display: inline-grid;

下圖是display: inline-grid的效果：

注意：設(shè)為網(wǎng)格布局以后，容器子元素（項(xiàng)目）的float、display: inline-block、display:
table-cell、vertical-align和column-*等設(shè)置都將失效。

劃分列 grid-template-columns

單位包括：

• 絕對(duì)值px，
• 百分比值%，
• 比例值fr，

絕對(duì)值 px：在容器內(nèi)劃分出3列，每列寬度為100px

grid-template-columns: 100px 100px 100px;

**百分比值 %：**將容器等分為3列，每列寬度為容器總寬度/3

grid-template-columns: 33.33% 33.33% 33.33%;

**比例值 fr：**將容器劃分為2列，第1列的寬度 ：第2列的寬度 = 1:2

 grid-template-columns: 1fr 2fr;

fr 是fraction 的縮寫，意為"片段"，可以與絕對(duì)長(zhǎng)度的單位結(jié)合使用

grid-template-columns: 150px 1fr 2fr;

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

上面代碼指定了一個(gè)三行三列的網(wǎng)格，列寬和行高都是100px

柵格間隙

所有瀏覽器都支持柵格布局中的間隙。

我們來(lái)創(chuàng)建一個(gè)包含三列兩行的柵格：

.container {
	display: grid;
	grid-template-columns: 200px 100px 300px;
	grid-template-rows: 100px 100px;
	gap: 20px;
}

打開(kāi)調(diào)試器可以看到的線條為柵格線，它們分隔柵格的軌道（行和列）柵格線開(kāi)始像獲得厚度一樣20px

網(wǎng)絡(luò)布局實(shí)例代碼及效果圖

網(wǎng)格軌道

• grid-template-columns屬性：定義每一列的列寬
• grid-template-rows屬性：定義每一行的行高

九宮格：實(shí)現(xiàn)列寬和行高都是200px的網(wǎng)格，即200寬高的九宮格

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
}

屬性值

repeat()

接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是重復(fù)的次數(shù)，第二個(gè)參數(shù)是所要重復(fù)的值
當(dāng)我們需要寫很多行很多列的時(shí)候，一個(gè)個(gè)敲相同的值會(huì)非常麻煩，這時(shí)候就可以使用repeat()函數(shù)，簡(jiǎn)化重復(fù)值

.container {
    display: grid;
	grid-template-columns: repeat(3,200px);
    grid-template-rows: repeat(3,200px);
}

不止于此，repeat還可以重復(fù)某種模式，像這樣簡(jiǎn)寫

grid-template-columns: repeat(3,200px 100px);

這句代碼意思是定義了6列，分別是200，100，200，100，200，100

grid-template-columns: repeat(2, 100px 20px 80px);

上面代碼定義了6列，第一列和第四列的寬度為100px，第二列和第五列為20px，第三列和第六列為80px，效果圖如下：

auto-fill

表示自動(dòng)填充，讓一行（或者一列）中盡可能的容納更多的單元格。
當(dāng)我們只需要確定列寬或者行高，而不用理有多少列時(shí)，就可以使用它了
每一列200px，列數(shù)設(shè)置為了auto-fill會(huì)自動(dòng)填充，此時(shí)縮小瀏覽器的寬度，項(xiàng)目會(huì)因填充不下而另起一行

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

上面代碼表示每列寬度100px，然后自動(dòng)填充，直到容器不能放置更多的列

fr

fr 單位代表網(wǎng)格容器中可用空間的一等份。使用方法如下

grid-template-columns: 200px 1fr 2fr ;
grid-template-rows: repeat(3,200px)

表示第一個(gè)列寬設(shè)置為 200px，后面剩余的寬度分為兩部分，第二給項(xiàng)目占1/3，第三個(gè)項(xiàng)目占2/3

從圖中可以看出第三列始終占據(jù)著剩余位置中的2份，列寬始終是第二列的二倍

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

上面代碼表示兩個(gè)相同寬度的列，效果圖：

fr可以與絕對(duì)長(zhǎng)度的單位結(jié)合使用，這時(shí)會(huì)非常方便

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

上面代碼表示，第一列的寬度為150像素，第二列的寬度是第三列的一半，效果圖如下：

minmax()

minmax() 函數(shù)產(chǎn)生一個(gè)長(zhǎng)度范圍，表示長(zhǎng)度就在這個(gè)范圍之中都可以應(yīng)用到網(wǎng)格項(xiàng)目中。它接受兩個(gè)參數(shù)，分別為最小值和最大值,也就是說(shuō)最大不會(huì)超過(guò)最大值，最小不能小過(guò)最小值

grid-template-columns: 200px 1fr minmax(400px,1fr);
grid-template-rows: repeat(3,200px)

auto

auto設(shè)置后，將由瀏覽器自行決定長(zhǎng)度，盡可能的會(huì)占滿剩余空間，除非有其他設(shè)置，例如有min-width之類的，利用這個(gè)關(guān)鍵字，我們可以輕易實(shí)現(xiàn)三列或者兩列布局。

grid-template-columns: 200px auto 200px;
grid-template-rows: repeat(3,200px)

對(duì)中間那列設(shè)置了auto，實(shí)現(xiàn)了中間自適應(yīng)的三欄布局

網(wǎng)格線

grid布局叫做網(wǎng)格布局，那自然少不了網(wǎng)格線的存在，使用方括號(hào)，指定每一根網(wǎng)格線的名字，方便以后的做定位時(shí)使用

grid-template-columns: [c1] 200px [c2] auto [c3] 200px [c4];
grid-template-rows:  [r1] 200px [r2] auto [r3] 200px [r4];

就像這樣定義了一個(gè)3*3的網(wǎng)格區(qū)域，就需要有4條水平線，4條垂直線

網(wǎng)格間距gap

row-gap屬性設(shè)置行與行的間隔（行間距），column-gap屬性設(shè)置列與列的間隔（列間距）。

.container {
	grid-template-columns: repeat(3,200px);
	grid-template-rows: repeat(3,200px);
	row-gap: 10px;
	column-gap: 10px;
}

row-gap、column-gap一樣值，可用gap:10px代替

grid-auto-flow 屬性

劃分網(wǎng)格以后，容器的子元素會(huì)按照順序，自動(dòng)放置在每一個(gè)網(wǎng)格。默認(rèn)的放置順序是"先行后列"，即先填滿第一行，再開(kāi)始放入第二行，即下圖數(shù)字的順序。
這個(gè)順序由grid-auto-flow屬性決定，默認(rèn)值是row，即"先行后列"。也可以將它設(shè)成column，變成"先列后行"。

grid-auto-flow: column;

注意：盒子的排列順序變成了先列后行

還有兩個(gè)特殊的屬性值row dense和column dense

當(dāng)我調(diào)整我們的代碼將某一個(gè)項(xiàng)目拉長(zhǎng)時(shí)，會(huì)有這一行放不下的情況，就像圖片左邊這個(gè)場(chǎng)景一樣，第6個(gè)項(xiàng)目因?yàn)樘L(zhǎng)了放不上去，那個(gè)位置被空出來(lái)了，我們可以嘗試使用。

grid-auto-flow: row dense;

結(jié)果就會(huì)得到右邊的情形，7號(hào)自動(dòng)的補(bǔ)了上去,
我們可能想讓下面長(zhǎng)度合適的填滿這個(gè)空白，這個(gè)時(shí)候可以設(shè)置 grid-auto-flow: row dense，表示盡可能填滿表格

單元格內(nèi)容排列方式

justify-items 屬性設(shè)置單元格內(nèi)容的水平位置（左中右），align-items 屬性設(shè)置單元格的垂直位置（上中下）

這里只以justify-items做展示，另一個(gè)同理，只是一個(gè)水平一個(gè)垂直的差別

• start：對(duì)齊單元格的起始邊緣。
• end：對(duì)齊單元格的結(jié)束邊緣。
• center：?jiǎn)卧駜?nèi)部居中。
• stretch：拉伸，占滿單元格的整個(gè)寬度（默認(rèn)值）。

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
    gap: 10px 10px;
    justify-items: center;
}

在上面的代碼中，表示單元格內(nèi)部居中

單元格內(nèi)部居左

justify-items: start;

單元格內(nèi)部居右

justify-items: end;

對(duì)于justify-items 和align-items 屬性，可以采用合并的寫法

place-items: start end;

內(nèi)容區(qū)域的排列方式

justify-content屬性是定義整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右），align-content屬性是定義整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）

• start ：對(duì)齊容器的起始邊框。
• end ：對(duì)齊容器的結(jié)束邊框。
• center ：容器內(nèi)部居中。

 justify-content: start;
/*justify-content: center;
justify-content: end;*/

上面代碼依次從上到下對(duì)應(yīng)

stretch ：項(xiàng)目大小沒(méi)有指定時(shí)，拉伸占據(jù)整個(gè)網(wǎng)格容器。

space-around ：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。因此，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍

space-between ：項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間沒(méi)有間隔。

space-evenly ：項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長(zhǎng)度的間隔。

.container {
  align-items: start;
}

上面代碼表示，單元格的內(nèi)容頭部對(duì)齊，效果如下圖

justify-content 屬性、align-content 屬性、place-content 屬性
justify-content屬性是整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右），align-content屬性是整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

這兩個(gè)屬性的寫法完全相同，都可以取下面這些值。（下面的圖都以justify-content屬性為例，align-content屬性的圖完全一樣，只是將水平方向改成垂直方向。）

start - 對(duì)齊容器的起始邊框

end - 對(duì)齊容器的結(jié)束邊框

center - 容器內(nèi)部居中

stretch - 項(xiàng)目大小沒(méi)有指定時(shí)，拉伸占據(jù)整個(gè)網(wǎng)格容器

space-around - 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍

space-between - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間沒(méi)有間隔

space-evenly - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長(zhǎng)度的間隔

place-content屬性是align-content屬性和justify-content屬性的合并簡(jiǎn)寫形式

place-content: <align-content> <justify-content>

如果省略第二個(gè)值，瀏覽器就會(huì)假定第二個(gè)值等于第一個(gè)值

設(shè)置多余網(wǎng)格

對(duì)于網(wǎng)格有顯式網(wǎng)格和隱式網(wǎng)格，顯示網(wǎng)格通過(guò)grid-template-columns 和 grid-template-rows 屬性中定義的行和列，當(dāng)實(shí)際行數(shù)或者列數(shù)大于設(shè)置的行列數(shù)時(shí)，就會(huì)有多余的網(wǎng)格，這些網(wǎng)格的寬高通過(guò)grid-auto-columns和grid-auto-rows屬性來(lái)設(shè)置

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 200px 200px ;
    gap: 10px 10px;
    grid-auto-rows: 50px;
}

在上面的代碼中設(shè)置了4*2的網(wǎng)格，但是我們一共用9個(gè)項(xiàng)目，通過(guò)grid-auto-rows: 50px設(shè)置了多余網(wǎng)格的高度

項(xiàng)目屬性
這部分是關(guān)于項(xiàng)目的屬性，也就是說(shuō)這些屬性要寫到項(xiàng)目自己的身上，不能再寫到container身上

指定項(xiàng)目的位置
實(shí)現(xiàn)的原理其實(shí)是指定項(xiàng)目的四個(gè)邊框，分別定位在哪根網(wǎng)格線

• grid-column-start屬性：左邊框所在的垂直網(wǎng)格線
• grid-column-end屬性：右邊框所在的垂直網(wǎng)格線
• grid-row-start屬性：上邊框所在的水平網(wǎng)格線
• grid-row-end屬性：下邊框所在的水平網(wǎng)格線

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px ;
    grid-template-rows: 200px 200px 200px;
    gap: 10px 10px;
}
.item-1 {
    background-color: #55efc4;
    grid-column-start: 2;
    grid-column-end: 4;
}

上面的代碼中指定了1號(hào)項(xiàng)目的左邊框從第二條網(wǎng)格線開(kāi)始，第4條網(wǎng)格線結(jié)束，因此將會(huì)占據(jù)2個(gè)網(wǎng)格

也可以使用span關(guān)鍵字，來(lái)實(shí)現(xiàn)占2個(gè)網(wǎng)格這樣的效果，可以將它理解為跨越的意思

grid-column-end: span 2;

表示的意思是：1號(hào)項(xiàng)目的左邊框距到右邊框跨越了2個(gè)網(wǎng)格。
對(duì)于上面的4個(gè)屬性可以采用簡(jiǎn)寫的方式，例如

grid-row: 1 / 4;
grid-column: 2 / 3;

這里的/不是除號(hào)的意思，僅是占位的作用。其中的第一行代碼，制定了上邊框在第1條網(wǎng)格線，下邊框在第4條網(wǎng)格線，第二行代碼同理。
如果只寫一個(gè)數(shù)字的話，默認(rèn)跨越1個(gè)網(wǎng)格

注意：當(dāng)我們遇到兩個(gè)項(xiàng)目占據(jù)位置重疊時(shí)我們可以采用z-index屬性確定上下關(guān)系，就像這樣

.item-1 {
    background-color: #55efc4;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 4;
}
.item-3 {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: #74b9ff;
}

給1號(hào)和3號(hào)項(xiàng)目添加了屬性，指定他們的占據(jù)位置，效果如左圖

給一號(hào)盒子添加了z-index:1后，一號(hào)盒子到了上層

grid-area屬性

在前面容器屬性講過(guò)grid-template-areas屬性，當(dāng)時(shí)只是知道了怎么劃分區(qū)域，現(xiàn)在這個(gè)屬性就是怎么把項(xiàng)目指定給區(qū)域

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px ;
    grid-template-rows: 200px 200px 200px;
    grid-template-areas: 'a a a' 
                         'b b c' 
                         'e e c';
    gap: 10px 10px;
}

首先我們先利用grid-template-areas屬性在容器上劃分區(qū)域，上面劃分了4塊區(qū)域，下面我們通過(guò)給項(xiàng)目添加grid-area屬性，來(lái)給它指定到某個(gè)區(qū)域當(dāng)中

.item-1 {
    grid-area: c;
    background-color: #55efc4;
}

上面的代碼中，將1號(hào)項(xiàng)目指定到了c區(qū)域，也就是右下角2個(gè)網(wǎng)格

注意：2個(gè)區(qū)域之間需要緊挨，不能隔開(kāi)

到此這篇關(guān)于css grid網(wǎng)格布局(柵格布局)示例代碼+圖文詳解的文章就介紹到這了,更多相關(guān)css grid網(wǎng)格布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論