1.什么是grid布局?

grid布局是最強(qiáng)大的布局方案,它把網(wǎng)頁分成了一個(gè)個(gè)可以任意組合的網(wǎng)格.

1.1grid布局與flex布局的區(qū)別?

flex是軸線布局,根據(jù)項(xiàng)目需求指定軸線方向.是'一維布局'
grid布局將容器分為行和列,產(chǎn)生單元格,然后指定'項(xiàng)目'所在單元格,可以看作是'二維布局'.grid布局遠(yuǎn)比flex布局強(qiáng)大

2.grid布局的基礎(chǔ)概念

2.1容器與項(xiàng)目

采用網(wǎng)格布局的區(qū)域,我們稱之為容器.
容器內(nèi)部使用網(wǎng)格定位的元素,我們稱之為項(xiàng)目.項(xiàng)目只能是容器的頂層元素.例如:

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

最外層的div是容器的話,那么里面的三個(gè)div就是項(xiàng)目,而所有的p標(biāo)簽都不是項(xiàng)目.

2.2行和列&單元格

容器的水平區(qū)域?yàn)樾?垂直區(qū)域?yàn)榱?
某行某列的交叉區(qū)域就是一個(gè)單元格.
通常n行m列的容器會(huì)產(chǎn)生n*m個(gè)單元格.

2.3網(wǎng)格線

劃分單元格的線我們稱之為網(wǎng)格線,通常n行會(huì)有n+1條網(wǎng)格線,m列也會(huì)有m+1條網(wǎng)格線.

3.容器屬性

定義在容器上的屬性我們稱之為容器屬性,定義在項(xiàng)目的屬性我們稱之為項(xiàng)目屬性.

3.1 display屬性

.container{
display:grid;
}

默認(rèn)情況下,容器都是塊級(jí)元素,當(dāng)然也可以設(shè)置為行內(nèi)塊級(jí)元素.

div {
  display: inline-grid;
}

3.2 grid-template-columns/rows屬性

容器被指定了grid布局后,就該給容器指定行和列了.

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

該代碼指定了一個(gè)三行三列容器,且每一個(gè)容器的行高和列寬都是100像素.
這里除了寫像素值以外也可以寫百分比.

.container {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 33.3% 33.3% 33.3%;
}

repeat()

但如此重復(fù)寫屬性值很麻煩,就可以使用repeat()函數(shù)來repeat.那以上代碼就可以改寫為

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

那同學(xué)們應(yīng)該看出來了,repeat()方法接受兩個(gè)參數(shù),第一個(gè)參數(shù)是重復(fù)次數(shù),第二個(gè)參數(shù)是值.

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

那這段代碼會(huì)生成幾列呢?
有時(shí)候單元格大小固定了,但容器的大小不固定,那就應(yīng)該使用auto-fill屬性自動(dòng)填充.

auto-fill

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

自動(dòng)生成n個(gè)列寬100px的單元格,生成到裝不下為止.

fr

為了方便反應(yīng)比例關(guān)系,grid提供了fr關(guān)鍵字(fraction//片段的縮寫)來直觀反應(yīng)比例關(guān)系.

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

上面代碼表示生成相同寬度的兩列.(即一行元素被兩個(gè)寬div分割)