初學者指南：CSS Grid 排版系統的基礎概念

更新日期： 2024 年 11 月 5 日

在網頁開發中，排版是至關重要的一環。

CSS Grid 是一個強大且靈活的排版工具，幫助開發者能夠以簡單的方式建立出精確、響應式的網頁布局。

本篇文章將帶領新手快速理解 CSS Grid 的基礎概念，讓您在網頁設計中更有效地控制內容佈局。

什麼是 CSS Grid？

CSS Grid 是一種專門為二維佈局設計的 CSS 標準。

它允許我們建立一個網格系統（Grid System），並將元素置於網格的不同位置上，形成具有欄（columns）和列（rows）的結構。

這樣的網格布局結構提供了高度靈活性，讓我們能夠輕鬆管理元素的對齊和排列，適合用來設計較為複雜的響應式頁面。

為什麼要使用 CSS Grid？

使用 CSS Grid 具有以下幾個優點：

1. 二維布局：CSS Grid 支援水平和垂直的同時控制，這意味著您可以在 X 軸（橫向）和 Y 軸（縱向）上自由安排元素，適合複雜佈局需求。
2. 精確控制：透過設定欄和列的大小、間距，可以精確控制每個元素的位置和佔用空間。
3. 響應式設計：CSS Grid 可以輕鬆地製作響應式設計，隨著螢幕大小自動調整元素位置，讓頁面在不同裝置上有良好的顯示效果。

CSS Grid 的基礎概念

在使用 CSS Grid 前，需要了解幾個重要概念：

Grid Container（網格容器）

首先，我們需要定義一個「網格容器」，這個容器會包含我們要佈局的所有元素。

在 HTML 中，通常透過 <div> 來作為容器。

接著，在 CSS 中為這個容器加上 display: grid; 樣式，即可開始使用 CSS Grid 功能。

.container {
  display: grid;
}

Grid Item（網格項目）

放在網格容器中的每一個子元素都稱為「網格項目」。

這些網格項目會自動根據容器的設置，進行排列與定位。

我們可以對每個項目進行進一步的排版設計。

定義列（Rows）和欄（Columns）

定義欄和列是 CSS Grid 中的核心。

透過 grid-template-columns 和 grid-template-rows 屬性，我們可以設定容器中的欄和列數量及大小。

例如：

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

以上代碼創建了 3 欄（第一欄佔 1 倍比例、第二欄佔 2 倍比例、第三欄佔 1 倍比例）和 2 行（第一行高度 100px，第二行高度 200px）。

網格間距（Gap）

gap 屬性（或是舊寫法 grid-gap）可以設定網格項目之間的間距。

這樣可以避免元素之間貼得太近，使排版更加美觀。設定方式如下：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

基本範例：建立簡單的三欄佈局

以下是一個基本的 CSS Grid 佈局範例，示範如何使用 CSS Grid 建立一個三欄的佈局：

HTML：

<div class="container">
  <div class="item">項目 1</div>
  <div class="item">項目 2</div>
  <div class="item">項目 3</div>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三欄等分佈局 */
  gap: 15px; /* 元素間距 15px */
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

這段代碼創建了一個三欄等分的佈局，並為每個項目加上間距，使版面更加清晰。

更進階：控制項目在網格中的位置

CSS Grid 還能夠控制每個網格項目在網格中的具體位置。

例如，可以使用 grid-column 和 grid-row 屬性，將某一個網格項目擴展至多欄或多行：

.item1 {
  grid-column: 1 / 3; /* 橫跨第一到第二欄 */
  grid-row: 1 / 2; /* 僅佔第一行 */
}

這樣可以靈活安排重要的內容，特別適合版頭或是需要特殊展示的元素。

結語

CSS Grid 是一種強大的佈局工具，特別適合用來設計具有複雜佈局的響應式網頁。

它的結構清晰，並且可以依據欄和列的配置輕鬆調整佈局。

透過熟練掌握這些基本概念，您將能夠製作出更加靈活且美觀的網頁設計。