[[385850]]

本文轉(zhuǎn)載自微信公眾號「前端思維框架」，作者ViktorHub。轉(zhuǎn)載本文請聯(lián)系前端思維框架公眾號。

注：該文翻譯及潤色工作，已得到原作者授權(quán)!

 

通過本文和大家一起重新認識 CSS Grid 布局 。

以下內(nèi)容是2021年，你使用 Grid 布局可以做的所有事情的備忘單!

Grid 結(jié)構(gòu)

Grid Architecture 

父類屬性

01grid-template-columns

該屬性用于定義列數(shù)和寬度。您既可以單獨設置每列的寬度，也可以使用 repeat() 函數(shù)為所有列設置統(tǒng)一的寬度。👇

 

 

02grid-template-rows

該屬性用于定義行數(shù)和高度。您既可以單獨設置每行的高度，也可以使用 repeat() 函數(shù)為所有行設置統(tǒng)一的高度。👇

 

 

03grid-template-areas

該屬性用于指定網(wǎng)格單元格應在整個父容器中按列和行進行承載的空間量。這個屬性可以讓我們直觀地看到自己在做什么。👇 

 

我們稱之為布局的藍圖(模板)👇。

 

04column-gap

此屬性用于在網(wǎng)格內(nèi)的列之間放置間隙。👇

 

05row-gap

此屬性用于在網(wǎng)格內(nèi)的行之間放置間隙。👇

 

06justify-items

此屬性用于沿著X軸 [主軸] 在網(wǎng)格容器內(nèi)定位網(wǎng)格項(子項)。它的4個值表示情況如下：👇

 

 

07align-items

此屬性用于沿Y軸[Cross Axis]在網(wǎng)格容器內(nèi)定位網(wǎng)格項(子項)。它的4個值表示情況如下：👇

 

08justify-content

此屬性用于將我們的網(wǎng)格 [基本上所有內(nèi)容] 沿X軸 [主軸] 放置在網(wǎng)格容器內(nèi)。它的7個值表示情況如下：👇

 

 

09align-content

這用于沿著Y軸 [Cross Axis] 將我們的網(wǎng)格[基本上所有內(nèi)容]放置在網(wǎng)格容器內(nèi)。它的7個值表示情況如下：👇

 

 

子類屬性 

 

 

01grid-column : start/end

這兩個屬性用于將多個列連接在一起。它是 grid-column-start 和 grid-column-start 的縮寫。

02grid-row : start/end

這兩個屬性用于將多個 ROWS 連接在一起。它是 grid-row-start 和 grid-row-end 的簡寫。

03grid-area

首先，我們需要設置 grid-template-areas☝️完成后，我們必須在子類中指定父類中使用的名稱，如下所示：👇

 

在父容器內(nèi)指定網(wǎng)格模板區(qū)域👇

 

在帶有網(wǎng)格區(qū)域的子類中指定在父容器中使用的名稱👇

 

04Justify-self

該屬性用于沿X軸 [主軸] 在網(wǎng)格容器內(nèi)定位1個單獨的網(wǎng)格項(子項)。它的4個值表示情況如下：👇

 

05align-self

該屬性用于沿Y軸 [Cross Axis] 在網(wǎng)格容器內(nèi)定位1個單獨的網(wǎng)格項(子項)。它的4個值表示情況如下：👇

 

速記

 

01place-content

 

02place-items

 

03place-self

 

04grid-template

 

05gap/grid-gap

 

最后，恭喜你讀完了本文，想必已經(jīng)掌握了 Grid 布局的使用方法!歡迎留言交流~

原文地址：https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3

原作者：Joy Shaheb 

翻譯/潤色：ViktorHub