1.什么是grid布局?
grid布局是最強大的布局方案,它把網頁分成了一個個可以任意組合的網格.
1.1grid布局與flex布局的區別?
flex是軸線布局,根據項目需求指定軸線方向.是'一維布局'
grid布局將容器分為行和列,產生單元格,然后指定'項目'所在單元格,可以看作是'二維布局'.grid布局遠比flex布局強大
2.grid布局的基礎概念
2.1容器與項目
采用網格布局的區域,我們稱之為容器.
容器內部使用網格定位的元素,我們稱之為項目.項目只能是容器的頂層元素.例如:
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
最外層的div是容器的話,那么里面的三個div就是項目,而所有的p標簽都不是項目.
2.2行和列&單元格
容器的水平區域為行,垂直區域為列.
某行某列的交叉區域就是一個單元格.
通常n行m列的容器會產生n*m個單元格.
2.3網格線
劃分單元格的線我們稱之為網格線,通常n行會有n+1條網格線,m列也會有m+1條網格線.
3.容器屬性
定義在容器上的屬性我們稱之為容器屬性,定義在項目的屬性我們稱之為項目屬性.
3.1 display屬性
.container{
display:grid;
}
默認情況下,容器都是塊級元素,當然也可以設置為行內塊級元素.
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;
}
該代碼指定了一個三行三列容器,且每一個容器的行高和列寬都是100像素.
這里除了寫像素值以外也可以寫百分比.
.container {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 33.3% 33.3% 33.3%;
}
repeat()
但如此重復寫屬性值很麻煩,就可以使用repeat()函數來repeat.那以上代碼就可以改寫為
.container {
display: grid;
grid-template-columns: repeat(3,33.3%);
grid-template-rows: repeat(3,33.3%);
}
那同學們應該看出來了,repeat()方法接受兩個參數,第一個參數是重復次數,第二個參數是值.
grid-template-columns: repeat(2, 100px 20px 80px);
那這段代碼會生成幾列呢?
有時候單元格大小固定了,但容器的大小不固定,那就應該使用auto-fill屬性自動填充.
auto-fill
.container {
display: grid;
grid-template-columns:repeat(auto-fill,100px);
}
自動生成n個列寬100px的單元格,生成到裝不下為止.
fr
為了方便反應比例關系,grid提供了fr關鍵字(fraction//片段的縮寫)來直觀反應比例關系.
.container {
display: grid;
grid-template-columns:grid-template-columns: 1fr 1fr;
}
上面代碼表示生成相同寬度的兩列.(即一行元素被兩個寬div分割)
