[[385850]]

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

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

通過(guò)本文和大家一起重新認(rèn)識(shí) CSS Grid 布局 。

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

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

Grid Architecture 

父類屬性

01grid-template-columns

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

02grid-template-rows

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

03grid-template-areas

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

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

04column-gap

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

05row-gap

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

06justify-items

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

07align-items

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

08justify-content

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

09align-content

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

子類屬性 

01grid-column : start/end

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

02grid-row : start/end

這兩個(gè)屬性用于將多個(gè) ROWS 連接在一起。它是 grid-row-start 和 grid-row-end 的簡(jiǎn)寫。

03grid-area

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

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

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

04Justify-self

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

05align-self

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

速記

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 

翻譯/潤(rùn)色：ViktorHub