CSS 排版詞條 3-21

網格排版CSS Grid

也常叫做：網格排版、CSS Grid、格線排版

你可能會這樣說

想做圖片牆或雜誌式的複雜版面，有行有列還要合併格子，用一橫排的排法撐不住，一換版就垮。

CSS Grid 是把容器切成棋盤的排版方式：你定義幾欄幾列、欄寬比例，再把元素放進格子。記住這個分工：Flex 管一維（一排或一欄），Grid 管二維（行加列）。

圖片牆、定價表、儀表板都適合交給 Grid；「三等欄、間距 24px」這種話，AI 會直接翻成 grid 語法。

進階玩法是讓某格跨兩欄、某列特別矮，做出不規則但整齊的雜誌版面。

主圖

欄數主圖跨欄間距

grid 管的是「行加列」的二維排版；「跨欄」讓第一格變主圖，雜誌感就是這樣做出來的。

圖 3-21　三等欄、間距一致，第一格還可以跨欄當主圖。

中文就可以

相簿頁請改用網格排版：
桌機四欄、平板三欄、手機兩欄，欄間距 16px。
第一張圖跨兩欄兩列當主圖，其他正常一格。
所有儲存格維持正方形比例，圖片裁切填滿不留白邊。
外層最大寬 1200px 置中，整頁不能出現橫向捲動。