[[385850]]

本文轉載自微信公眾號「前端思維框架」，作者ViktorHub。轉載本文請聯系前端思維框架公眾號。

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

 

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

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

Grid 結構

Grid Architecture 

父類屬性

01grid-template-columns

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

 

 

02grid-template-rows

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

 

 

03grid-template-areas

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

 

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

 

04column-gap

此屬性用于在網格內的列之間放置間隙。👇

 

05row-gap

此屬性用于在網格內的行之間放置間隙。👇

 

06justify-items

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

 

 

07align-items

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

 

08justify-content

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

 

 

09align-content

這用于沿著Y軸 [Cross Axis] 將我們的網格[基本上所有內容]放置在網格容器內。它的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☝️完成后，我們必須在子類中指定父類中使用的名稱，如下所示：👇

 

在父容器內指定網格模板區域👇

 

在帶有網格區域的子類中指定在父容器中使用的名稱👇

 

04Justify-self

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

 

05align-self

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

 

速記

 

01place-content

 

02place-items

 

03place-self

 

04grid-template

 

05gap/grid-gap

 

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

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

原作者：Joy Shaheb 

翻譯/潤色：ViktorHub