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

更新日期： 2024 年 11 月 5 日

CSS Grid 是一個功能強大的網頁布局工具，而 grid-template 屬性是其中重要的基礎之一。

grid-template 屬性使我們可以靈活地定義欄（columns）和列（rows）的佈局，甚至可以在網格中劃分出具體的區塊名稱，來便於元素的精確定位。

本文將幫助您了解 grid-template 的概念、基本用法以及常見範例。

什麼是 grid-template？

grid-template 是 CSS Grid 中的一組屬性，包括 grid-template-columns、grid-template-rows 和 grid-template-areas，它們一起決定了網格的整體布局。

以下是它們的基本功能：

• grid-template-columns：用於定義網格中的欄數量及每個欄的寬度。
• grid-template-rows：用於定義網格中的列數量及每個列的高度。
• grid-template-areas：用於命名網格的特定區域，方便將內容精確地放置在指定位置。

基本屬性介紹

grid-template-columns 和 grid-template-rows

這兩個屬性是用來定義網格容器的欄和列。

透過設定欄的數量和大小，我們可以快速建立靈活的布局。

語法範例：

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows: 150px 150px;
}

在這段代碼中，grid-template-columns 設定了三個欄，第一欄寬度為 100px，第二欄為 200px，第三欄佔用剩餘空間。

grid-template-rows 設定了兩個列，每列的高度均為 150px。

這樣的設定會產生一個 3×2 的網格結構，可以用來進一步放置元素。

grid-template-areas

grid-template-areas 是一種更直觀的佈局方式，它允許我們給網格中的區域命名，並根據名稱來控制項目的排列位置。

語法範例：

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

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

在這段代碼中，grid-template-areas 定義了一個布局，其中包含「header」、「sidebar」和「content」區域。

header 佔據第一行的全部三欄；sidebar 和 content 在第二行，其中 sidebar 佔據第一欄，content 佔據剩下的兩欄。

透過這種方法，您可以使用區域名稱來將內容精確放置到網格的不同位置，而不必擔心編寫繁瑣的 CSS 代碼。

grid-template 屬性的組合用法

在實際布局中，我們可以將 grid-template-columns 和 grid-template-rows 屬性結合在一起使用，直接用 grid-template 來設定網格的欄、列尺寸和區域配置。

這樣做可以使代碼更加簡潔，適合於快速指定一個完整的網格布局。

grid-template 的語法

grid-template: <grid-template-rows> / <grid-template-columns>;

• grid-template-rows：指定每列的高度。
• grid-template-columns：指定每欄的寬度。

例如，以下代碼設定了一個簡單的 2×3 網格布局，其中有兩列和三欄：

.container {
  display: grid;
  grid-template: 150px 200px / 100px 1fr 2fr;
}

在這段代碼中，grid-template 指定了：

• 兩列：第一列高度為 150px，第二列高度為 200px。
• 三欄：第一欄寬度為 100px，第二欄佔用剩餘空間的 1 倍，第三欄佔用剩餘空間的 2 倍。

這樣的寫法等價於以下代碼：

.container {
  display: grid;
  grid-template-rows: 150px 200px;
  grid-template-columns: 100px 1fr 2fr;
}

grid-template 屬性的實際應用範例

建立簡單的三欄布局

假設我們希望創建一個簡單的三欄布局，可以使用 grid-template-columns 來指定每個欄的大小。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

這段代碼會創建一個三欄布局，其中每一欄的寬度比例為 1:2:1。這樣，我們可以靈活調整每個欄的寬度，以符合不同的設計需求。

使用 grid-template-areas 設計常見的網站結構

以下是一個使用 grid-template-areas 設計的網頁結構，包含頁眉（header）、側邊欄（sidebar）、主內容（content）和頁腳（footer）：

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

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

這樣的代碼設計出了一個典型的三層結構網站佈局，其中：

• 頁眉（header）佔據整個第一行。
• 第二行包含左側的側邊欄（sidebar）和右側的主內容區（content）。
• 頁腳（footer）佔據最後一行。

透過命名區域，我們可以輕鬆地將各個元素放置到指定區域中，並使代碼更具可讀性。

grid-template 的優點

1. 直觀的結構：透過 grid-template-areas，我們可以將頁面分區，並以人性化的方式定義元素位置。
2. 彈性和靈活性：grid-template-columns 和 grid-template-rows 提供靈活的欄和列設置，能夠根據不同的需求輕鬆調整布局。
3. 減少冗餘代碼：使用 grid-template，我們不需要為每個項目設定單獨的位置，整個布局過程更加簡化。

結語

CSS Grid 的 grid-template 是一個強大的布局工具，讓我們可以更方便地定義欄、列和具體的區域名稱。

通過 grid-template-columns、grid-template-rows 和 grid-template-areas 的組合使用，您可以輕鬆創建不同的網頁結構。

掌握 grid-template 的基本用法，將幫助您更快地設計響應式、結構清晰的網頁。