建立 2025-02-25 更新 2026-09-11

CSS Grid 網格佈局

Grid 先在容器上畫軌道（track），再把子元素放進格子。適合整頁版面、卡片牆，以及「這個區塊要跨兩欄」的設計。

啟用

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

1fr 是一等份剩餘空間。repeat(3, 1fr) 等於 1fr 1fr 1fr。

定義軌道

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  gap: 1rem;
}

`minmax()`、`auto-fit`、`auto-fill`

自適應卡片牆（欄寬至少 16rem，能塞幾欄算幾欄）：

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

auto-fit：空欄會收起來，讓現有欄拉寬
auto-fill：即使沒有 item 也保留空欄

min-content / max-content / auto 可依內容決定軌道大小。

跨欄與跨列

格子線從 1 起算。1 / 3 表示從第 1 條線排到第 3 條（佔兩欄）。

.hero { grid-column: 1 / -1; } /* 整列拉滿 */
.feature { grid-column: span 2; }

也可用 grid-row: 1 / 3。-1 代表最後一條線。

`grid-template-areas`

用名字畫版面，閱讀性最好：

.page {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}

.page > header { grid-area: header; }
.page > nav    { grid-area: nav; }
.page > main   { grid-area: main; }
.page > footer { grid-area: footer; }

RWD

小螢幕把 grid-template-areas 改成單欄即可，HTML 不用動。

對齊

屬性	作用對象
`justify-items` / `align-items`	每個格子裡面的 item
`justify-content` / `align-content`	整張網格在容器裡（軌道總和小於容器時）
`justify-self` / `align-self`	單一 item
`place-items` / `place-content` / `place-self`	上述縮寫

.icon-grid {
  display: grid;
  place-items: center;
}

子網格 `subgrid`（進階）

子元素若也是 grid，可讓它的軌道對齊父層，做「每張卡片的標題列對齊」這類設計：

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

瀏覽器支援已相當普遍，仍建議在目標環境確認。

總結

需求	寫法
等寬 N 欄	`repeat(N, 1fr)`
響應式卡片牆	`repeat(auto-fit, minmax(16rem, 1fr))`
跨欄	`grid-column: span 2` 或 `1 / 3`
整頁骨架	`grid-template-areas`
格子內置中	`place-items: center`

媒體查詢裡切換欄數見媒體查詢。