Gird網(wǎng)格布局
指定一個容器采用網(wǎng)格布局摄欲，在父元素中定義grid屬性
display:grid; //塊級元素布局
或
display:inline-grid; //行內(nèi)元素
在容器中添加了網(wǎng)格布局后，就要劃分行和列疮薇，columns(列)蒿涎、row(行)
grid-template-columns //定義每一列的寬度
grid-template-row //定義每一行的高度
當(dāng)使用gird布局后，容器子元素中的float惦辛、display:inline-block劳秋、vertical-align都會失效
實例效果如下：
<div class="main">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
.main{
display: grid;
grid-template-columns: 100px 100px 100px;// 定義一行三列，每列的寬度，也可以使用百分比
grid-template-rows: 100px 100px 100px;// 定義一行三列玻淑，每列的高度度嗽冒，也可以使用百分比
}
20201118115220326.png
這樣就簡單的實現(xiàn)了grid布局。但是感覺grid-template-columns: 100px 100px 100px;這樣寫非常麻煩补履，尤其是列數(shù)多的時候添坊。這時我們可以使用==repeat()函數(shù)==，這樣可以簡化重復(fù)◇锎福現(xiàn)在用==repeat()函數(shù)== 看下效果
.main{
display: grid;
grid-template-columns: repeat(5,20%);// 第一個參數(shù)代表每一行有5列, 每列的寬度是20%
grid-template-rows: repeat(5,100px);// 第一個參數(shù)代表每一行有5列, 每列的高度是100px
}
20201118120254184.png
為了方便表示比例關(guān)系贬蛙，可以使用==fr== 關(guān)鍵字， 1fr 和2fr 表示后者是前者的兩倍谚攒，
.main{
display: grid;
grid-template-columns: 1fr 1fr; //這里不用逗號分隔
}
20201118134653843.png
如果在項目中阳准，我們經(jīng)常對頁面布局采用左右兩欄的布局，這樣我們就看下代碼
.main{
display: grid;
grid-template-columns:30% 70%;// 30%表示左側(cè)欄的寬度馏臭， 后者是右側(cè)欄的寬度
}
下面就說下行間距和列間距：
grid-row-gap 表示行間距
grid-column-gap 表示列間距
grid-row-gap: 20px;
grid-column-gap: 20px;
或者簡寫成
grid-gap: 20px 20px;
