Grid布局是CSS中一種強(qiáng)大的二維布局系統(tǒng)，可以同時(shí)處理行和列的布局。grid 初始化元素為柵格化

將一個(gè)HTML元素轉(zhuǎn)換為網(wǎng)格的容器，只需要對(duì)其設(shè)置display: grid即可。display: grid告訴咱們，能夠運(yùn)用CSS Grid的相關(guān)特點(diǎn)了。

<dl class="container">

  <dd class="item1">item1dd>

  <dd class="item2">item2dd>

  <dd class="item3">item3dd>

  <dd class="item4">item4dd>

  <dd class="item5">item5dd>

  <dd class="item6">item6dd>

dl>

.container{

  display: grid;

}

常用的特點(diǎn)：

grid-template-columns：100px 100px 100px 豎向擺放，其特點(diǎn)值為豎向擺放的長(zhǎng)度 此刻有三行

grid-template-rows：100px 100px 橫向擺放，其特點(diǎn)值為橫向擺放的長(zhǎng)度 此刻有兩列

grid-tamplate: 100px 100px 100px / 100px 100px 上面兩個(gè)特點(diǎn)的簡(jiǎn)寫 用/分隔開來

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

align-self:穿插軸上的對(duì)齊方法（子代設(shè)置特點(diǎn)）

justify-self:主軸上的對(duì)齊方法（子代設(shè)置特點(diǎn)）

對(duì)齊方法常用特點(diǎn)值

flex-start 從開始的當(dāng)?shù)厮��?筆直對(duì)齊 ，默許是左

flex-end 從結(jié)束的當(dāng)?shù)厮��?筆直對(duì)齊 ，默許是右

center 居中

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

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

justify-items

咱們想對(duì)一切子元素內(nèi)容進(jìn)行水平方向的擺放，那么需要在設(shè)定的容器中運(yùn)用justify-items特點(diǎn)，而不是一個(gè)個(gè)子元素進(jìn)行設(shè)置justify-self特點(diǎn)。justify-items特點(diǎn)值同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

同理的，咱們想對(duì)一切子元素內(nèi)容進(jìn)行筆直方向的擺放，那么需要在設(shè)定的容器中運(yùn)用align-items特點(diǎn)，而不是一個(gè)個(gè)子元素進(jìn)行設(shè)置align-self特點(diǎn)。align-items特點(diǎn)值同align-self。它的學(xué)習(xí)曲線相對(duì)平緩，但功能非常強(qiáng)大！