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

更新日期： 2024 年 11 月 5 日

在 CSS Grid 中，grid-column 屬性是用來控制網格項目在水平方向上（即欄）的佔用範圍。

使用 grid-column，我們可以精確地設定項目從哪一個欄開始、跨越幾個欄，或是在指定的欄位置上展示。

這個屬性對於設計靈活、具結構性的網格布局非常有幫助。

本文將介紹 grid-column 的基本概念、用法，以及實際範例，並附上示意圖，幫助您輕鬆理解。

什麼是 grid-column？

grid-column 是一個 CSS Grid 的屬性，用來控制網格項目在橫向佔據的欄數和位置。

這個屬性特別適合用於設置不規則的布局，讓項目可以跨越多個欄，並在指定的位置上顯示。

它可以有效讓我們在同一個網格布局中實現各式各樣的版面配置。

grid-column 的基本語法

grid-column 屬性可以用以下兩種方式來設置：

grid-column: start / end;

• start：表示項目開始的欄線。
• end：表示項目結束的欄線。

或者可以使用簡單的跨欄方式：

grid-column: span n;

• span n：表示項目跨越的欄數（n 是欄數的數值）。

grid-column 的基礎應用

假設我們設置了一個包含 4 個欄的網格布局，並希望一些項目可以跨越多個欄，這時我們可以使用 grid-column 來實現。

指定起始和結束欄線

在以下範例中，我們設置了一個 4 欄的網格，並使用 grid-column 屬性將項目擺放到指定的欄範圍內。

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

.item {
  grid-column: 2 / 4;
}

在這段代碼中，.item 項目將從第 2 欄線開始，佔據第 2 到第 4 欄的位置。

使用 span 跨越欄數

span 可以讓我們簡單地設定項目跨越的欄數。以下範例展示了如何使用 span 來跨越 2 欄。

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

.item {
  grid-column: span 2;
}

在這段代碼中，.item 項目會從它所在的欄線開始，並跨越 2 個欄寬度。

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

範例代碼與效果說明

假設我們有以下的 HTML 結構，包含 4 個項目：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

對應的 CSS：

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

.item1 {
  grid-column: 1 / 3; /* 項目 1 從第 1 欄跨到第 3 欄 */
}

.item2 {
  grid-column: span 2; /* 項目 2 跨越 2 欄 */
}

.item3 {
  grid-column: 3 / 5; /* 項目 3 從第 3 欄跨到第 5 欄 */
}

.item4 {
  grid-column: 2 / 4; /* 項目 4 從第 2 欄跨到第 4 欄 */
}

在此範例中：

• 項目 1 從第 1 欄線開始，跨越至第 3 欄線。
• 項目 2 從它的初始位置開始，跨越 2 個欄。
• 項目 3 從第 3 欄線開始，跨越至第 5 欄線（實際佔第 3 和第 4 欄）。
• 項目 4 從第 2 欄線開始，跨越至第 4 欄線。

示意圖

grid-column 設置示意圖

以下是一個簡單的示意圖來幫助理解 grid-column 的作用。假設我們有 4 個欄的網格，並且項目 1 到 4 各自按照上面的代碼進行排列：

╔═════════╦═════════╦═════════╦═════════╗
║   項目1  ║   項目1  ║         ║         ║
║ (1 / 3) ║         ║   項目3  ║   項目3  ║
╠═════════╩═════════╬═════════╩═════════╣
║         項目2      ║   項目4  ║   項目4  ║
╚════════════════════╩═════════╩═════════╝

在此圖中：

• 項目 1 佔據第 1 到第 3 欄。
• 項目 2 佔據 2 欄寬度。
• 項目 3 佔據第 3 到第 5 欄。
• 項目 4 佔據第 2 到第 4 欄。

結語

grid-column 是 CSS Grid 中一個靈活且強大的屬性，能讓我們在網格中方便地安排項目的位置和跨欄數量。

無論是設置開始和結束的欄線，還是使用 span 跨越多欄，grid-column 都能幫助我們創建靈活的布局。

透過掌握 grid-column，您可以在設計網頁布局時，更加輕鬆地實現各種結構的配置。

嘗試在您的項目中應用它吧，您會發現這個屬性的強大之處！