建站
咨詢
售后
建站咨詢
新聞中心
本文轉載自微信公眾號「前端思維框架」，作者ViktorHub。轉載本文請聯(lián)系前端思維框架公眾號。
注：該文翻譯及潤色工作，已得到原作者授權!
通過本文和大家一起重新認識 CSS Grid 布局 。
以下內容是2021年，你使用 Grid 布局可以做的所有事情的備忘單!
Grid 結構
Grid Architecture
父類屬性
01grid-template-columns
該屬性用于定義列數和寬度。您既可以單獨設置每列的寬度，也可以使用 repeat() 函數為所有列設置統(tǒng)一的寬度。
02grid-template-rows
該屬性用于定義行數和高度。您既可以單獨設置每行的高度，也可以使用 repeat() 函數為所有行設置統(tǒng)一的高度。
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?完成后，我們必須在子類中指定父類中使用的名稱，如下所示：
在父容器內指定網格模板區(qū)域
在帶有網格區(qū)域的子類中指定在父容器中使用的名稱
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
分享名稱：剛出爐的Grid布局備忘錄，拿走！
本文URL：http://www.5511xx.com/article/djgjipg.html
