CSS: Grid

實作grid網格筆記整理

基本概念

Grid 容器：

• 使用 display: grid; 定義一個網格容器，容器內的子元素自動成為 Grid 項目（Grid Items）。

Grid 行與列：

• 定義網格的行（rows）和列（columns）：
• 使用 grid-template-rows 定義行。
• 使用 grid-template-columns 定義列。

網格單元格（Grid Cell）：

• 每個子元素佔據網格的一個或多個單元格。

行間距與列間距：

• row-gap 或 grid-row-gap 定義行間距。
• column-gap 或 grid-column-gap 定義列間距。
• 或使用簡化屬性 gap 一次設定行列間距。

grid-row 是橫向的，用來控制網格中元素的 行（row）。grid-column 是縱向的，用來控制元素的 列（column）。

實作

筆者希望用 grid 完成下方排版，區塊可以放圖片也可以放文字等，為了方便實作用4種不同顏色色塊作區隔。包含7列（column）6行（row），格子設定長寬為100px正方形。

完整index.html程式碼：

(左方為網頁實際成果 右方F12看網格)

其中的 grid-row:1/span2 (表示 從第 1 行開始，跨 2 行的高度) ; 等同於 grid-row:1/3 (表示從第 1 行開始，結束於第 3 行);

其中的 grid-template-columns: repeat(3, 1fr) ; 等同於 grid-template-columns: 1fr 1fr 1fr