初學者指南：CSS Grid 的 grid-area 概念

更新日期： 2024 年 11 月 5 日

在 CSS Grid 中，grid-area 是一個非常實用的屬性，可以讓我們輕鬆地控制網格項目在網格中的位置和範圍。

使用 grid-area，我們可以指定一個項目從哪一行（row）和哪一欄（column）開始、跨越多少行或欄，甚至可以透過區域名稱來簡化布局設計。

本文將介紹 grid-area 的基本概念、用法，以及一些實際範例，並提供示意圖，幫助您快速掌握這個屬性。

什麼是 grid-area？

grid-area 是一個 CSS Grid 屬性，用來設置網格項目在網格中的範圍。

它的功能可以分成兩種情況：

1. 使用數字值指定位置和跨度：設定網格項目跨越的起始和結束欄線、行線。
2. 使用區域名稱放置項目：結合 grid-template-areas，讓項目可以根據區域名稱來放置，方便簡化布局。

grid-area 的基本語法

1. 數字值格式：

   grid-area: row-start / column-start / row-end / column-end;

• row-start：開始的行線。
• column-start：開始的欄線。
• row-end：結束的行線。
• column-end：結束的欄線。

2. 區域名稱格式（搭配 grid-template-areas 使用）：

   grid-area: area-name;

• area-name：指定的區域名稱，這個名稱需與 grid-template-areas 中的名稱一致。

grid-area 的基礎應用

使用數字值指定範圍

我們可以通過數字值，指定網格項目在網格中的位置和跨越的範圍。

例如，如果我們希望某個項目從第 1 行第 1 欄開始，並跨越到第 3 行第 3 欄，可以這樣設置：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
}

.item {
  grid-area: 1 / 1 / 3 / 3;
}

在這段代碼中，.item 項目從第 1 行、第 1 欄開始，佔據了第 1 和第 2 行以及第 1 和第 2 欄的位置（即跨越 2 行 2 欄）。

使用區域名稱指定位置

如果我們在網格容器中設置了 grid-template-areas，就可以用區域名稱來放置網格項目，這種方法尤其適合設計複雜的網頁布局。

範例：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px auto;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

在這段代碼中，grid-template-areas 定義了頁面的布局結構，並將各區域命名為「header」、「sidebar」、「content」和「footer」。

接著，我們透過 grid-area 屬性，直接使用區域名稱來將項目放置到相應的區域內。

這樣的設置能讓 HTML 結構更簡單，也更便於維護和調整。

實際範例：grid-area 在網格中的應用

假設我們的 HTML 結構如下：

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

對應的 CSS：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px auto;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

在此布局中，網格項目將自動根據其 grid-area 的名稱來排列到指定的區域。

示意圖

使用 grid-area 指定區域位置的示意圖

假設我們的頁面分為三行三列，區域設定如上面的範例，則網格布局將如下圖所示：

╔═══════════╦═══════════╦═══════════╗
║   Header  ║   Header  ║   Header  ║
╠═══════════╩═══════════╩═══════════╣
║ Sidebar   ║   Content  ║   Content  ║
╠═══════════╦═══════════╦═══════════╣
║   Footer  ║   Footer  ║   Footer  ║
╚═══════════╩═══════════╩═══════════╝

在此圖中：

• Header 區域佔據第一行的三個欄，寬度為容器的全寬。
• Sidebar 區域在第二行的左側。
• Content 區域在第二行的右側，跨越兩欄。
• Footer 區域佔據最後一行的三個欄，與 Header 一樣佔滿全寬。

grid-area 的優點

• 簡化代碼：透過區域名稱來放置項目，讓代碼更易讀且易於維護。
• 靈活的布局方式：可以自由地設定每個項目在網格中的位置和範圍，適合設計不規則布局。
• 更直觀的結構：利用 grid-template-areas 的名稱設定，使布局結構一目了然，特別適合複雜頁面設計。

結語

grid-area 是 CSS Grid 中一個非常強大的屬性，讓我們可以靈活地控制網格項目的位置和範圍。

無論是透過數字值來精確設置位置，還是利用區域名稱來簡化代碼，grid-area 都能幫助我們構建出清晰、有條理的布局。

掌握 grid-area 的用法，將大幅提升您在網頁布局設計中的靈活性和效率。