grid 初始化元素為柵格化
將一個(gè)HTML元素轉(zhuǎn)換為網(wǎng)格的容器，只需要對(duì)其設(shè)置display: grid即可。display: grid告訴我們，可以使用CSS Grid的相關(guān)屬性了。
<dl class="container">
<dd class="item1">item1</dd>
<dd class="item2">item2</dd>
<dd class="item3">item3</dd>
<dd class="item4">item4</dd>
<dd class="item5">item5</dd>
<dd class="item6">item6</dd>
</dl>
.container{
display: grid;
}
常用的屬性：
grid-template-columns：100px 100px 100px 豎向排列，其屬性值為豎向排列的長(zhǎng)度 此時(shí)有三行
grid-template-rows：100px 100px 橫向排列，其屬性值為橫向排列的長(zhǎng)度 此時(shí)有兩列
grid-tamplate: 100px 100px 100px / 100px 100px 上面兩個(gè)屬性的簡(jiǎn)寫 用/分隔開(kāi)來(lái)
grid-gap:10px 10px 5px 5px； 上右下左的間距
align-self:交叉軸上的對(duì)齊方式（子代設(shè)置屬性）
justify-self:主軸上的對(duì)齊方式（子代設(shè)置屬性）
對(duì)齊方式常用屬性值
flex-start 從開(kāi)始的地方水平/垂直對(duì)齊 ，默認(rèn)是左
flex-end 從結(jié)束的地方水平/垂直對(duì)齊 ，默認(rèn)是右
center 居中
space-between 水平/垂直方向首尾緊貼父元素，中間間隙等分
space-around 水平/垂直方向的子元素之間的左右/上下間距相等，相鄰元素之間的間距為兩倍間距
我們想對(duì)所有子元素內(nèi)容進(jìn)行水平方向的排列，那么需要在設(shè)定的容器中使用justify-items屬性，而不是一個(gè)個(gè)子元素進(jìn)行設(shè)置justify-self屬性。justify-items屬性值同justify-self。
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
}
復(fù)制代碼
同理的，我們想對(duì)所有子元素內(nèi)容進(jìn)行垂直方向的排列，那么需要在設(shè)定的容器中使用align-items屬性，而不是一個(gè)個(gè)子元素進(jìn)行設(shè)置align-self屬性。align-items屬性值同align-self。
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
align-items: center;}
參考
鏈接：https://juejin.im/post/6886367930523746312
【 微信掃一掃 】
