CSS Grid template-areas：不規則九宮格布局筆記

夕桜白雪

站點建設中

第一階段先固定內容結構、分類與部署流程；線上後台暫不加入，保持純靜態與 Git 可追蹤。

查看規劃

標籤

夕桜白雪

站點建設中

第一階段先固定內容結構、分類與部署流程；線上後台暫不加入，保持純靜態與 Git 可追蹤。

查看規劃

標籤

夕桜白雪

站點建設中

第一階段先固定內容結構、分類與部署流程；線上後台暫不加入，保持純靜態與 Git 可追蹤。

查看規劃

標籤

335 字

1 分鐘

CSS Grid template-areas：不規則九宮格布局筆記

2026-06-12

開發筆記

CSS Grid

/

Layout

/

Frontend

/

開發筆記

grid-template-areas 可以用命名區域描述版面，比起手動計算 grid-column / grid-row，更適合維護「不規則拼圖式」的布局。

核心概念#

先在父層宣告 grid，並用文字地圖描述每個區塊的位置：

1
.home-grid {
2
  display: grid;
3
  grid-template-columns: 1fr 1fr 1.2fr;
4
  grid-template-rows: auto auto auto;
5
  gap: 10px;
6
  grid-template-areas:
7
    "announce announce gif1"
8
    "png      picture  gif2"
9
    "png      text     text";
10
}

接著把每個子元素分配到對應區域：

1
.announce-bar { grid-area: announce; }
2
.gif-area-1 { grid-area: gif1; }
3
.gif-area-2 { grid-area: gif2; }
4
.png-area { grid-area: png; }
5
.center-image { grid-area: picture; }
6
.text-area { grid-area: text; }

重點是每一行的區域名數量必須等於 grid-template-columns 定義的欄數；以上範例是三欄，所以每一行都要有三個區域名，否則整個區域布局會失效。

實際效果#

這個布局會形成：

公告欄橫跨左側兩欄。
PNG 立繪縱跨左側兩行。
兩個 GIF 分別位於右上與右中。
文字區橫跨底部右側兩欄。

這種寫法適合首頁拼貼、作品展示、Y2K 貼紙風格版面，或需要同時放置公告、角色圖、動態素材與短文的區塊。

響應式處理#

小螢幕上可以把網格退化為單欄，保留閱讀順序：

1
@media (max-width: 768px) {
2
  .home-grid {
3
    grid-template-columns: 1fr;
4
    grid-template-areas:
5
      "announce"
6
      "gif1"
7
      "picture"
8
      "gif2"
9
      "png"
10
      "text";
11
  }
12
}