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

簡介

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

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

注意：Grid 布局只對項目生效，項目只能是容器的一級子元素，不包含項目的子元素

grid相關(guān)屬性

下面從容器屬性和項目屬性兩大塊來記錄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)格布局后，項目的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ī)定列和行的自動尺寸。
• grid-auto-flow：指定在柵格布局中元素怎樣自動布局排列。

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

Grid 布局的使用方法

塊級容器（寬度撐滿整行）時,容器獨占一行

display: grid;

下圖是display: grid的效果：

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

display: inline-grid;

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

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

劃分列 grid-template-columns

單位包括：

• 絕對值px，
• 百分比值%，
• 比例值fr，

絕對值 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 的縮寫，意為"片段"，可以與絕對長度的單位結(jié)合使用

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

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

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

柵格間隙

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

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

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

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

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

網(wǎng)格軌道

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

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

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

屬性值

repeat()

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

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

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

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)我們只需要確定列寬或者行高，而不用理有多少列時，就可以使用它了
每一列200px，列數(shù)設(shè)置為了auto-fill會自動填充，此時縮小瀏覽器的寬度，項目會因填充不下而另起一行

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

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

fr

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

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

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

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

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

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

fr可以與絕對長度的單位結(jié)合使用，這時會非常方便

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

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

minmax()

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

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

auto

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

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

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

網(wǎng)格線

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

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

就像這樣定義了一個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)格以后，容器的子元素會按照順序，自動放置在每一個網(wǎng)格。默認(rèn)的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行，即下圖數(shù)字的順序。
這個順序由grid-auto-flow屬性決定，默認(rèn)值是row，即"先行后列"。也可以將它設(shè)成column，變成"先列后行"。

grid-auto-flow: column;

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

還有兩個特殊的屬性值row dense和column dense

當(dāng)我調(diào)整我們的代碼將某一個項目拉長時，會有這一行放不下的情況，就像圖片左邊這個場景一樣，第6個項目因為太長了放不上去，那個位置被空出來了，我們可以嘗試使用。

grid-auto-flow: row dense;

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

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

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

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

• start：對齊單元格的起始邊緣。
• end：對齊單元格的結(jié)束邊緣。
• center：單元格內(nèi)部居中。
• stretch：拉伸，占滿單元格的整個寬度（默認(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;

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

place-items: start end;

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

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

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

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

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

stretch ：項目大小沒有指定時，拉伸占據(jù)整個網(wǎng)格容器。

space-around ：每個項目兩側(cè)的間隔相等。因此，項目之間的間隔比項目與容器邊框的間隔大一倍

space-between ：項目與項目的間隔相等，項目與容器邊框之間沒有間隔。

space-evenly ：項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。

.container {
  align-items: start;
}

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

justify-content 屬性、align-content 屬性、place-content 屬性
justify-content屬性是整個內(nèi)容區(qū)域在容器里面的水平位置（左中右），align-content屬性是整個內(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;  
}

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

start - 對齊容器的起始邊框

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

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

stretch - 項目大小沒有指定時，拉伸占據(jù)整個網(wǎng)格容器

space-around - 每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍

space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔

space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔

place-content屬性是align-content屬性和justify-content屬性的合并簡寫形式

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

如果省略第二個值，瀏覽器就會假定第二個值等于第一個值

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

對于網(wǎng)格有顯式網(wǎng)格和隱式網(wǎng)格，顯示網(wǎng)格通過grid-template-columns 和 grid-template-rows 屬性中定義的行和列，當(dāng)實際行數(shù)或者列數(shù)大于設(shè)置的行列數(shù)時，就會有多余的網(wǎng)格，這些網(wǎng)格的寬高通過grid-auto-columns和grid-auto-rows屬性來設(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個項目，通過grid-auto-rows: 50px設(shè)置了多余網(wǎng)格的高度

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

指定項目的位置
實現(xiàn)的原理其實是指定項目的四個邊框，分別定位在哪根網(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號項目的左邊框從第二條網(wǎng)格線開始，第4條網(wǎng)格線結(jié)束，因此將會占據(jù)2個網(wǎng)格

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

grid-column-end: span 2;

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

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

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

注意：當(dāng)我們遇到兩個項目占據(jù)位置重疊時我們可以采用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號和3號項目添加了屬性，指定他們的占據(jù)位置，效果如左圖

給一號盒子添加了z-index:1后，一號盒子到了上層

grid-area屬性

在前面容器屬性講過grid-template-areas屬性，當(dāng)時只是知道了怎么劃分區(qū)域，現(xiàn)在這個屬性就是怎么把項目指定給區(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ū)域，下面我們通過給項目添加grid-area屬性，來給它指定到某個區(qū)域當(dāng)中

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

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

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

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

最新評論