CSS Grid：初學者的強大佈局指南

歡迎，未來的網頁設計魔法師們！今天，我們將進入 CSS Grid 的神奇世界。別擔心如果你之前從未寫過一行代碼——我將成為你這次旅程中的友好指南。在本教程結束時，你將能夠像專業人士一樣創建佈局！

什麼是 CSS Grid？

CSS Grid 就像網頁佈局的超級英雄。它是一個兩維系統，讓你可以按照行和列來組織內容。想像你在房間裡排列家具——這就是 Grid 為你的網頁所做的！

你為什麼應該關心？

在 Grid 出現之前，我們通常會為了創建複雜的佈局而苦於使用浮動和定位。這就像試圖用膠帶來蓋房子一樣！Grid 讓這些變得簡單直觀。相信我，經過 15 年的教學，我看過學生發現 Grid 時臉上的釋然。

開始使用 CSS Grid

讓我們從一個簡單的例子開始。想像我們正在創建一個基本的網頁佈局，包括頂部、主內容、側邊欄和底部。

<div class="container">
<header>頂部</header>
<main>主內容</main>
<aside>側邊欄</aside>
<footer>底部</footer>
</div>

現在，讓我們加入一些 CSS 魔法：

.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
gap: 10px;
}

header { grid-area: header; background-color: #ff9999; }
main   { grid-area: main; background-color: #99ff99; }
aside  { grid-area: sidebar; background-color: #9999ff; }
footer { grid-area: footer; background-color: #ffff99; }

這裡發生了什麼？我們告訴容器以網格形式顯示，並使用 grid-template-areas 定義佈局。這就像為我們的網頁繪製一張地圖！

CSS grid 屬性

grid 屬性是一種縮寫，用於一次性設定所有顯式的網格屬性。它就像 Grid 的瑞士軍刀！

可能的值

下面是 grid 屬性的可能值表：

值	描述
none	未指定網格行為
<grid-template>	指定網格列和行的尺寸
<grid-template-rows> / <grid-auto-columns>	設定 grid-template-rows 和 grid-auto-columns 屬性
<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns> ] ]	設定 grid-auto-flow 屬性，並可選地設定 grid-auto-rows 和 grid-auto-columns 屬性

適用範圍

grid 屬性適用於網格容器元素。這就像說，“嘿，這個元素是網格佈局的負責人！”

DOM 語法

object.style.grid = "none|<grid-template-rows> / <grid-template-columns>|<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]|initial|inherit";

別擔心，現在這看起來像外星語言。我們會一一解析！

CSS Grid - <grid-template>

<grid-template> 值讓你定義你的網格結構。這就像為你的佈局創建一個藍圖。

.container {
grid: 100px 300px / 3fr 1fr;
}

這創建了一個兩行（100px 和 300px 高）和兩列（3fr 和 1fr 寬）的網格。fr 單位就像“可用空間的分数”——非常方便！

CSS Grid - minmax() 和 repeat()

這兩個函數是 Grid 的動態雙子：

• minmax() 設定軌道的最小和最大尺寸。
• repeat() 讓你可以重複軌道定義。

.container {
grid: repeat(3, minmax(100px, auto)) / repeat(3, 1fr);
}

這創建了一個 3x3 的網格，其中每行至少 100px 高但可以增長，列則平等分享可用空間。

CSS Grid - auto-flow 值

auto-flow 值決定了自動放置的項目如何流入網格。這就像決定是水平還是垂直填充書架。

.container {
grid: auto-flow / 200px 1fr;
}

這創建了 200px 和 1fr 的列，行則根據需要自動創建。

CSS Grid - auto-flow dense 值

在 auto-flow 中添加 dense 告訴網格如果稍後出現較小的項目，則早些填滿網格中的洞。這就像高效地玩俄罗斯方程序！

.container {
grid: auto-flow dense / 200px 1fr;
}

CSS Grid - 複雜縮寫

你可以將所有這些概念結合起來創造一個強大的聲明：

.container {
grid: [auto-flow] 100px / repeat(3, [col-start] 1fr [col-end]);
}

這創建了一個自動流動的 100px 高度的行，和三個等寬列，並且有命名的線。

CSS Grid - 相關屬性

Grid 有一系列相關屬性。以下是一些關鍵的親屬：

屬性	描述
grid-template-rows	定義網格的行
grid-template-columns	定義網格的列
grid-template-areas	定義網格模板區域
grid-auto-rows	設定隱式創建的行的尺寸
grid-auto-columns	設定隱式創建的列的尺寸
grid-auto-flow	控制自動放置算法的工作方式

記住，熟能生巧！不要害怕試驗這些屬性。我曾經有一個學生用 Grid 創作了一幅數字藝術作品——可能性無限！

總結來說，CSS Grid 是一個強大的工具，可以將你的網頁佈局從平凡轉變為非凡。起初它可能會讓人感到不知所措，但隨著練習，你將能夠輕鬆創建複雜的佈局。快樂編程，願你的網格總是完美對齊！

Credits: Image by storyset