grid 初始化元素為柵格化

將一個(gè)HTML元素轉(zhuǎn)換為網(wǎng)格的容器，只需要對其設(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 豎向排列，其屬性值為豎向排列的長度 此時(shí)有三行

grid-template-rows：100px 100px 橫向排列，其屬性值為橫向排列的長度 此時(shí)有兩列

grid-tamplate: 100px 100px 100px / 100px 100px 上面兩個(gè)屬性的簡寫 用/分隔開來

grid-gap:10px 10px 5px 5px； 上右下左的間距

align-self:交叉軸上的對齊方式（子代設(shè)置屬性）

justify-self:主軸上的對齊方式（子代設(shè)置屬性）

對齊方式常用屬性值

flex-start 從開始的地方水平/垂直對齊 ，默認(rèn)是左

flex-end 從結(jié)束的地方水平/垂直對齊 ，默認(rèn)是右

center 居中

space-between 水平/垂直方向首尾緊貼父元素，中間間隙等分

space-around 水平/垂直方向的子元素之間的左右/上下間距相等，相鄰元素之間的間距為兩倍間距

justify-items

我們想對所有子元素內(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ù)制代碼

align-items

同理的，我們想對所有子元素內(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