grid 初始化元素為柵格化
將一個HTML元素轉換為網(wǎng)格的容器，只需要對其設置display: grid即可。display: grid告訴我們，可以使用CSS Grid的相關屬性了。
<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 豎向排列，其屬性值為豎向排列的長度 此時有三行
grid-template-rows：100px 100px 橫向排列，其屬性值為橫向排列的長度 此時有兩列
grid-tamplate: 100px 100px 100px / 100px 100px 上面兩個屬性的簡寫 用/分隔開來
grid-gap:10px 10px 5px 5px； 上右下左的間距
align-self:交叉軸上的對齊方式（子代設置屬性）
justify-self:主軸上的對齊方式（子代設置屬性）
對齊方式常用屬性值
flex-start 從開始的地方水平/垂直對齊 ，默認是左
flex-end 從結束的地方水平/垂直對齊 ，默認是右
center 居中
space-between 水平/垂直方向首尾緊貼父元素，中間間隙等分
space-around 水平/垂直方向的子元素之間的左右/上下間距相等，相鄰元素之間的間距為兩倍間距
我們想對所有子元素內容進行水平方向的排列，那么需要在設定的容器中使用justify-items屬性，而不是一個個子元素進行設置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;
}
復制代碼
同理的，我們想對所有子元素內容進行垂直方向的排列，那么需要在設定的容器中使用align-items屬性，而不是一個個子元素進行設置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
【 微信掃一掃 】
