CSS Grid 是什麼？網頁版面配置語法、切版範例與 Flexbox 判斷

css grid 是什麼？它解決哪一種版面問題？

CSS Grid 是 CSS 的格線佈局系統，適合處理欄與列同時存在的二維版面配置，常用在網站骨架、儀表板與卡片列表。

如果你已經會基本 HTML 與 CSS，學 Grid 的重點不是背完整規格，而是看懂「父層建立格線、子元素放進格線」這個分工。Grid 特別適合需要穩定對齊的版面，例如首頁區塊、後台 dashboard、作品集卡片牆、左右欄內容頁。

40 字定義

CSS Grid 讓一個容器產生欄與列，子元素可以依照格線線號、區域名稱或自動流向放到指定位置。

二維版面配置的核心觀念

Flexbox 主要沿著單一方向排列內容，Grid 則同時處理水平與垂直方向。當你在切版時同時在意「第幾欄」與「第幾列」，通常就進入 CSS Grid 版面配置的範圍。

父層加上 display: grid 後，直接子元素會變成 grid item。格線由 column、row、track、gap 組成，版面穩定度通常比用 margin 硬推位置更好。

最小 display: grid 範例

用途：建立一個最小可跑的三欄卡片區，適合用來確認 Grid 是否生效。

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

解釋：.cards 是 grid container，裡面的直接子元素會平均分成三欄，gap 控制欄與列之間的距離。

常見錯誤：把 display: grid 寫在每張卡片上，卻沒有寫在卡片共同父層，版面就不會形成同一組格線。

CSS Grid 和 Flexbox 怎麼選？

選 Grid 或 Flexbox，先看問題有沒有同時牽涉欄與列。整體版面骨架用 Grid，按鈕、選單、卡片內容多半用 Flexbox。

實務上兩者常一起用：外層用 Grid 排 header、sidebar、main，內層用 Flexbox 排 icon、文字、按鈕。硬把所有東西都交給同一套語法，反而會讓 CSS 變難維護。

Flexbox 適合單軸排列

Flexbox 很適合處理一排或一欄內容，例如導覽列、按鈕群組、表單欄位、卡片內的標題與價格。你只需要控制主軸方向、對齊與間距時，用 Flexbox 會比較直覺。

Grid 適合整體骨架

Grid 適合先畫出頁面的結構，例如左側 sidebar、右側內容、上方 header、底部 footer。版面需要跨欄、跨列、固定欄寬與彈性欄寬混用時，Grid 的語意會更清楚。

判斷點	優先選 Grid	優先選 Flexbox
排列方向	同時控制欄與列	只控制一排或一欄
常見用途	頁面骨架、dashboard、卡片列表	導覽列、按鈕群組、卡片內文
對齊方式	依格線位置對齊	依內容流向對齊
維護方式	先定義容器規則	多從內容排列出發

navbar、dashboard、card list 決策表

情境	建議	原因
navbar 裡的 logo、選單、按鈕	Flexbox	內容沿水平軸排列，重點是置中與間距
後台 dashboard 的側欄與主內容	Grid	需要穩定的二維版面骨架
商品或文章卡片列表	Grid	欄數會隨寬度改變，卡片要對齊
卡片內的標題、摘要、按鈕	Flexbox	同一張卡片內通常是單軸內容流

如果你想深入 Flexbox 的定位，可以接著看 CSS Flexbox 教學，把兩套版面工具分清楚會比死背語法更有效。

CSS Grid 名詞中英對照怎麼看？

學 Grid 最容易卡在名詞。先把 container、item、line、track、cell、area 對齊中文概念，再讀文件會快很多。

台灣讀者常把 column 和 row 翻成「欄」與「列」後仍然混淆，建議直接用視覺方向記：column 是直向欄位，row 是橫向列帶。

名詞表

英文	常用中文	實作理解
Grid Container	格線容器	寫 display: grid 的父層
Grid Item	格線項目	容器的直接子元素
Grid Line	格線線	欄與列的邊界線，可用線號定位
Grid Track	格線軌道	兩條線之間的一欄或一列
Grid Cell	格線儲存格	一欄一列交會的小格
Grid Area	格線區域	多個 cell 組成的命名區塊
Gap	間距	欄與列之間的空隙

台灣讀者容易混淆的列與欄

grid-template-columns 控制欄，會影響左右方向的分割；grid-template-rows 控制列，會影響上下方向的分割。屬性名稱看的是被建立的軌道，不是元素移動方向。

中英對照最小範例

一個 3 欄 2 列的版面，可以想成 3 個 column tracks 與 2 個 row tracks。單一格子是 cell，跨多格後才會形成 area。這個心智模型比只翻譯名詞更可靠。

CSS Grid 父層屬性怎麼寫？

父層屬性負責建立格線規則，最常用的是 display: grid、欄列模板、gap、fr、repeat() 與 minmax()。

多數 Grid 切版問題都可以先從父層解掉。先決定欄數、列高、間距與自動填滿規則，再讓子元素依需要跨欄或指定位置。

屬性或函式	寫在哪裡	用途	最小範例
display: grid	父層	建立 grid container	display: grid;
grid-template-columns	父層	定義欄寬	grid-template-columns: 240px 1fr;
grid-template-rows	父層	定義列高	grid-template-rows: auto 1fr;
gap	父層	設定欄列間距	gap: 24px;
repeat()	父層	重複建立軌道	repeat(3, 1fr)
minmax()	父層	設定最小與最大尺寸	minmax(240px, 1fr)

display: grid

用途：把父層變成 grid container，讓直接子元素進入同一組格線。

.page {
  display: grid;
}

解釋：只寫這一行時，瀏覽器會建立隱含格線，子元素仍會依文件順序排列。

常見錯誤：以為加上 display: grid 就會自動變成多欄，實際欄數仍要用模板或自動填滿規則定義。

columns 與 rows

用途：建立固定側欄加彈性內容區，常用在部落格文章頁或後台管理頁。

.article-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 32px;
}

解釋：第一欄固定 280px，第二欄吃掉剩餘空間。minmax(0, 1fr) 可以降低內容把欄位撐爆的機率。

常見錯誤：只寫 1fr 卻放進很長的連續文字或表格，導致主內容溢出容器。

gap

用途：統一管理格線間距，避免每個 item 都各自寫 margin。

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 40px;
}

解釋：column-gap 控制左右欄距，row-gap 控制上下列距。只要欄列間距一致，也可以直接用 gap。

常見錯誤：在 grid item 上混用大量 margin，後續改版時很難判斷真正的版面間距來源。

fr、repeat()、minmax() 組合

用途：建立可自動適應寬度的卡片列表，少寫多組 media query。

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

解釋：minmax(240px, 1fr) 讓每張卡片最小 240px，空間足夠時平均分配剩餘寬度。

常見錯誤：把 1fr 寫成 1 fr。中間不能有空白，否則語法無效。

CSS Grid 子元素怎麼放到指定位置？

子元素屬性負責指定 item 放在哪裡，常用 grid-column、grid-row、span 與起訖線控制跨欄跨列。

父層定義版面地圖，子元素決定自己占哪一塊。這個分工很適合做首頁主視覺、重點卡片、排行榜、側欄摘要等不規則區塊。

屬性	寫在哪裡	用途	最小範例
grid-column	子元素	指定欄位起訖	grid-column: 1 / 3;
grid-row	子元素	指定列位起訖	grid-row: 1 / 2;
span	子元素	指定跨幾欄或幾列	grid-column: span 2;
grid-area	子元素	放入命名區域	grid-area: main;

起訖線

用途：讓重點卡片從第一條欄線跨到第三條欄線，形成較寬的視覺權重。

.featured-card {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

解釋：1 / 3 指的是從線 1 到線 3，中間會跨過兩個欄位。

常見錯誤：把線號當成格子數。三條線之間只有兩個欄位，這點在 DevTools overlay 裡看最清楚。

span

span 適合你不在乎從哪條線開始，只想讓某個 item 多占幾欄。卡片列表裡的精選文章、報表裡的總覽卡，常用這種寫法。

命名線與 area 的差異

命名線是替格線線號取名，適合精準定位；area 是替一塊矩形區域命名，適合頁面骨架。新手先學 area 會比較直覺，做複雜設計系統時再補命名線。

跨兩欄卡片範例

用途：在三欄卡片列表中，讓第一張重點內容跨兩欄。

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card—wide {
grid-column: span 2;
}

解釋：.card--wide 仍然是同一個 grid item，只是它占用兩個 column tracks。

常見錯誤：在手機版忘記取消跨欄，導致窄螢幕仍嘗試排成多欄。小螢幕可改成 grid-column: auto;。

如何用 grid-template-areas 像畫平面圖一樣切版？

grid-template-areas 可以用名稱畫出版面區塊，特別適合 header、sidebar、main、footer 這類網站骨架。

這種寫法的好處是可讀性高。設計、行銷或 no-code 使用者就算不熟線號，也能看懂哪一塊內容放在哪裡。

header、sidebar、main、footer

用途：建立典型內容網站骨架，上方 header、左側 sidebar、右側 main、底部 footer。

.site-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 24px;
}
.site-header {
grid-area: header;
}
.site-sidebar {
grid-area: sidebar;
}
.site-main {
grid-area: main;
}
.site-footer {
grid-area: footer;
}

解釋：每一行字串代表一列，字串裡的名稱代表欄位區域。相同名稱連在一起，就會形成同一個 area。

常見錯誤：area 名稱拼錯，例如模板寫 sidebar，子元素寫 side-bar，瀏覽器不會幫你猜。

桌機與手機 area 切換

用途：桌機保留 sidebar，手機改成單欄順序，讓內容先於補充導覽。

@media (max-width: 768px) {
  .site-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

解釋：手機版只改父層模板，就能調整整個區塊順序，不必在 HTML 裡搬動元素。

常見錯誤：只改欄數，忘記同步改 grid-template-areas，造成模板欄位數和字串欄位數不一致。

area 必須是矩形的提醒

grid-template-areas 的同名區域必須形成完整矩形，不能做 L 形或斷裂形狀。我的做法是先用 area 處理大骨架，再用內層 Grid 或 Flexbox 處理細節，CSS 會乾淨很多。

如何從設計稿拆成 CSS Grid？

從設計稿拆 Grid，要先看內容區塊，再拆欄列，最後把命名、間距、斷點整理成可維護的 CSS 規則。

很多切版問題不是語法不會，而是一開始把區塊拆錯。看到設計稿先不要急著寫 grid-template-columns，先判斷哪些區塊應該共享同一組格線。

先看內容區塊

把頁面切成 header、hero、features、article list、sidebar、footer 等內容區塊。只有在同一個視覺群組裡需要對齊的元素，才適合放進同一個 grid container。

再拆欄列

拆欄列時先問三件事：有哪些欄是固定寬度、哪些欄要彈性伸縮、哪些區塊需要跨欄。這一步會直接決定 px、fr、minmax() 的使用方式。

最後整理成可維護 CSS

可維護的 Grid CSS 會把容器、區塊命名、RWD 規則分開。設計系統裡常會把欄距、最大寬度、斷點整理成 token，可延伸閱讀 設計系統與版面規範。

步驟	要做的事	產出
1	標出內容區塊	區塊清單
2	找出共用對齊線	主要欄線
3	決定固定欄與彈性欄	欄寬規則
4	命名區域或特殊卡片	area 或 item class
5	補上斷點與防溢出	RWD CSS

5 步驟切版流程

用途：把設計稿中的首頁 feature 區塊整理成可重複使用的 Grid 模組。

.feature-section {
  --grid-gap: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--grid-gap);
  align-items: start;
}
.feature-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(—grid-gap);
}

解釋：外層處理主要文案與列表比例，內層再處理 feature list。不要讓所有元素擠在同一個大 Grid 裡。

常見錯誤：為了貼合設計稿而寫過多魔術數字，後續換內容長度就會破版。

CSS Grid 如何做響應式版面？

響應式 Grid 常用 minmax()、auto-fit、auto-fill、media query 與 container query 控制欄數。

卡片列表不一定要每個斷點手寫欄數。若卡片有合理最小寬度，可以讓瀏覽器自動判斷一列能放幾張，維護成本會低很多。

minmax()

minmax() 用來設定欄位最小與最大值。常見寫法是 minmax(240px, 1fr)，代表卡片至少 240px，空間足夠時再平均分配。

auto-fit vs auto-fill

auto-fit 會讓空欄位收合，常用在卡片數量不固定的版面。auto-fill 會保留可填入的欄位軌道，適合你需要維持格線節奏的情境。

container query 使用情境

當元件會被放在不同寬度的容器中，例如同一張卡片可能出現在首頁、側欄、列表頁，container query 比只看整個 viewport 更貼近元件實際空間。

用途：讓 card list 依照容器寬度改欄數，而不只依照螢幕寬度。

.card-shell {
  container-type: inline-size;
}
.card-list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@container (min-width: 640px) {
.card-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

解釋：容器夠寬時，內部列表才切成兩欄。這對可重用元件很有幫助。

常見錯誤：把 container query 當成 media query 的完全替代。頁面級版面仍常需要 media query 控制整體骨架。

RWD 卡片列表範例

用途：建立不用手動列出多個斷點的響應式卡片列表。

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

解釋：容器寬度足夠時會增加欄數，寬度不足時會自然降成較少欄。

常見錯誤：最小寬度設太大，例如 360px，手機版可能需要水平捲動。卡片最小寬度要依內容和容器一起測。

CSS Grid 常見錯誤怎麼排除？

Grid 常見問題多半來自語法空白、內容溢出、隱含列高、area 不連續，以及誤解 subgrid 的使用方式。

排錯時先打開 DevTools 的 Grid overlay，看線號、gap、area 是否符合預期，再檢查內容本身有沒有超過可用寬度。不要一開始就亂加 overflow: hidden。

1fr 不要寫成 1 fr

fr 是一個 CSS 單位，數字和單位必須黏在一起。1 fr 會被視為無效值，瀏覽器可能直接忽略整條宣告。

內容溢出

長網址、表格、程式碼、沒有換行的英文，都可能把 1fr 欄位撐開。我的習慣是主內容欄用 minmax(0, 1fr)，再針對內文元素處理換行與最大寬度。

用途：處理 sidebar 加主內容版面中，主內容被長文字撐爆的情況。

.content-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
}
.content-layout main {
min-width: 0;
overflow-wrap: break-word;
}

解釋：minmax(0, 1fr) 和 min-width: 0 可以讓主內容欄真的縮回可用寬度。

常見錯誤：只在外層加 overflow: hidden，表面上切掉問題，實際內容可讀性可能變差，也可能影響版面穩定。談到版面位移時，可補看 CLS 版面位移修正。

subgrid 正確觀念

subgrid 是讓子層沿用父層格線的能力，適合卡片內部內容要跟外層欄線對齊的情境。正確方向是寫在 grid-template-columns 或 grid-template-rows 的值，不是寫 display: subgrid。正式發布前仍建議查 MDN 相容性表。

排錯表

問題	可能原因	處理方式
欄位沒有出現	只寫 display: grid	補上 grid-template-columns
CSS 宣告無效	1fr 寫成 1 fr	移除數字與單位之間的空白
主內容溢出	1fr 欄被內容撐開	使用 minmax(0, 1fr) 與 min-width: 0
area 無效	名稱不連續或不是矩形	讓同名區域形成完整矩形
手機版仍多欄	沒有改 RWD 規則	在小螢幕改成單欄或調整 area
subgrid 沒生效	寫成 display: subgrid	改查正確語法與目標瀏覽器支援

CSS Grid 產生器、DevTools、視覺化編輯器怎麼用？

Grid 工具適合輔助理解與檢查，不適合無腦複製。產生器做初稿，DevTools 驗證格線，最後回到 CSS 整理。

對設計、行銷、no-code 製作者來說，工具能把抽象格線變成可看的線和區塊。重點是讀懂輸出的 CSS，而不是把工具當成切版黑盒。

產生器怎麼用

CSS Grid Generator 可以快速設定 rows、columns、gap，適合用來試版面骨架。產生後要檢查是否有太多固定尺寸，正式專案通常要改成 fr、minmax() 或設計系統 token。

DevTools 怎麼看格線

Chrome、Firefox 等瀏覽器 DevTools 都能顯示 Grid overlay。打開後先看三件事：線號是否符合預期、gap 是否來自 Grid、area 名稱是否對到子元素。

視覺化編輯器如何對應 CSS

視覺化編輯器常把欄數、列高、間距、對齊用面板呈現。你看到的欄位數通常對應 grid-template-columns，間距對應 gap，區塊命名可能對應 grid-area 或內部 class。

用途：把產生器輸出的固定欄寬，改成比較適合正式網站的彈性欄寬。

.generator-output {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  gap: 20px;
}
.cleaned-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}

解釋：第一段像工具初稿，第二段比較適合放進會變動寬度的網站容器。

常見錯誤：把工具輸出的固定 pixel 欄寬直接放到正式頁，桌機看似正常，平板和手機很快就破版。

不要只複製貼上

工具給的是起點，不是最終版。產生器負責快速試圖，DevTools 負責驗證，人工整理負責命名、斷點、可維護性。這一步做完，Grid 才會變成團隊能長期使用的 CSS。

學完 CSS Grid 下一步怎麼練？

練 Grid 的順序應該從單一卡片列表開始，再做頁面骨架、RWD、area 切換，最後練設計稿拆解。

不要一開始就挑太複雜的 dashboard。先把父層欄列、子元素跨欄、手機版單欄這三件事練熟，再補進工具與 DevTools。

練習順序

1. 用 display: grid 做三欄卡片列表。
2. 加入 repeat(auto-fit, minmax()) 做響應式。
3. 用 grid-column: span 2 做重點卡片。
4. 用 grid-template-areas 做 header、sidebar、main、footer。
5. 拿一張真實設計稿，照 5 步驟拆成 Grid。

推薦資源

語法查證建議看 MDN CSS Grid Layout，完整參考可看 CSS-Tricks Complete Guide to Grid。互動練習可用 CSS Grid Garden，範例學習可看 Grid by Example。需要快速試格線時，可用 CSS Grid Generator 產生初稿。

站內下一篇閱讀路徑

如果 CSS 基礎還不穩，先回到 CSS 基礎教學。如果你在判斷一排元素怎麼對齊，看 Flexbox 會更直接。等到版面規則開始重複出現在多個頁面，再延伸到 design system 的 grid token。

CSS Grid 是什麼？

CSS Grid 是 CSS 的二維版面配置系統，可以在父層建立欄與列，再讓子元素放進指定格線位置。它適合用在頁面骨架、卡片列表、dashboard、左右欄內容區等需要穩定對齊的版面。

CSS Grid 和 Flexbox 差在哪？

Grid 擅長同時處理欄與列，適合整體版面骨架；Flexbox 擅長單軸排列，適合導覽列、按鈕群組與卡片內部內容。實務切版常把兩者混用。

display: grid 之後，哪些元素會變成 grid item？

寫上 display: grid 的元素會成為 grid container，它的直接子元素會變成 grid item。孫層元素不會自動變成同一組 grid item，除非它自己的父層也建立 Grid。

fr、repeat()、minmax() 分別什麼時候用？

fr 用來分配剩餘空間，repeat() 用來重複建立欄或列，minmax() 用來設定最小與最大尺寸。常見組合是 repeat(auto-fit, minmax(240px, 1fr))。

grid-template-areas 適合新手嗎？

適合。它用命名區域畫出版面，對 header、sidebar、main、footer 這類骨架很直覺。要注意同名 area 必須形成矩形，名稱也要和子元素的 grid-area 對上。

auto-fit 和 auto-fill 差在哪？

auto-fit 會讓空欄位收合，常用在卡片數量不固定的列表。auto-fill 會保留可填入的欄位軌道，適合需要維持格線節奏的版面。

subgrid 是什麼？可以寫 display: subgrid 嗎？

subgrid 讓子層沿用父層的欄或列格線，適合需要內外對齊的複雜版面。不能寫 display: subgrid，應查正確語法並在發布前確認目標瀏覽器支援。

為什麼 Grid 版面會溢出或高度怪怪的？

常見原因包含長文字撐開 1fr 欄位、item 預設最小寬度影響縮放、內容高度不一致、area 設定錯誤。可先用 DevTools 看格線，再檢查 minmax(0, 1fr)、min-width: 0 與換行規則。

CSS Grid 產生器可以直接拿來切正式網站嗎？

可以當初稿，但不建議原封不動貼上正式網站。產生器常輸出固定尺寸，仍要依專案改成可維護的命名、彈性欄寬、RWD 規則與設計系統間距。

新手學 CSS Grid 的練習順序是什麼？

先練三欄卡片列表，再練 auto-fit 響應式，接著練跨欄卡片、grid-template-areas 頁面骨架，最後拿真實設計稿拆欄列與斷點。

CSS Grid 會取代 Flexbox 嗎？

不會。Grid 和 Flexbox 解決的問題不同。Grid 適合二維版面與頁面骨架，Flexbox 適合單軸內容排列。成熟的切版通常會把 Grid 用在外層，Flexbox 用在元件內層。