以下是您提供的英文文本翻译成繁體中文的版本：

CSS - Grid Layout

# CSS - 網格佈局：初學者指南

你好啊，未來的網頁設計超新星！今天，我們將踏上一段令人興奮的旅程，進入 CSS 網格佈局的世界。別擔心如果你之前從未寫過一行代碼——我將成為你的友好導遊，我們會一步一步地學習。在這個教學的結束，你將能夠像專業人士一樣創建有型、響應式的佈局！

## 網格佈局是什麼？

想像你正在一個房間裡擺設家具。你可能會在心裡把空間分為行和列，以幫助你整齊地組織一切。CSS 網格佈局對網頁所做的，基本上就是這件事！

CSS 網格佈局是一個強大的工具，讓我們能在網頁上創建二維佈局。就像在你的網頁上有一個無形的網格，你可以將內容精確地放在你想要的位置。酷炫吧？

## 網格元素

在我們深入之前，讓我們先熟悉一些關鍵術語：

1. 網格容器：這是包含所有網格項目的父元素。
2. 網格項目：這是網格容器的子元素。
3. 網格線：構成網格結構的分隔線。
4. 網格軌道：網格線之間的空間（行或列）。
5. 網格單元格：行和列的交點。
6. 網格區域：由四條網格線包圍的矩形空間。

現在這些聽起來可能會讓人混淆，我們很快就能在實際操作中看到它們！

## Display Grid 屬性

讓我們從一個簡單的例子開始。假設我們想創建一個基本的 3x3 網格。我們這樣做：

```html
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

讓我們來解析一下：

我們在容器上設置 display: grid; 以激活網格佈局。
grid-template-columns: auto auto auto; 創建了三個等寬的列。
我們為網格項目設置樣式以增加可見性。

太棒了！你剛創建了你的第一個網格佈局。多麼令人興奮！

網格行和列

現在，讓我們更具體地設定我們的行和列。我們可以定義確切的尺寸：

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 80px 200px;
}

這樣創建的網格有：

三列：100px、200px 和 100px 寬
兩行：80px 和 200px 高

你也可以使用不同的單位，如百分比或新的 fr 單位（可用空間的分数）：

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

這創建了一個類似的佈局，但列會根據可用空間流動地調整大小。

網格間距

有時候，你希望在你的網格項目之間有一些間距。這時 grid-gap 就派上用場了：

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

這在所有行和列之間添加了 10px 的間距。你也可以分別設定行和列的間距：

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

CSS 網格線

記得我們之前提到的網格線嗎？我們可以用它們精確地定位我們的項目：

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

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

.item1 {
  grid-column: 1 / span 4;
}

.item2 {
  grid-row: 2 / span 2;
}

.item3 {
  grid-column: 2 / span 2;
}

.item4 {
  grid-column: 4;
  grid-row: 2;
}

.item5 {
  grid-column: 2 / span 3;
  grid-row: 3;
}

這創建了一個複雜的佈局，包括一個橫跨全寬的頭部，一個側邊菜單，主內容區域，右邊欄，以及一個尾頁。玩轉這些值，看看它們如何影響佈局！

CSS 網格屬性參考

這裡有一個一些常見的 CSS 網格屬性的便捷表格：

屬性	描述
display: grid;	定義一個網格容器
grid-template-columns	指定列的數量和大小
grid-template-rows	指定行的數量和大小
grid-gap	設定網格項目之間的間距
grid-column-start	指定網格項目的開始位置
grid-column-end	指定網格項目的結束位置
grid-row-start	指定網格項目的開始位置
grid-row-end	指定網格項目的結束位置
grid-area	指定網格項目的大小和位置

至此，你已經踏入了 CSS 網格佈局的奇妙世界。記住，熟能生巧，所以不要害怕嘗試不同的佈局和屬性。在你還未意識到之前，你將能夠輕鬆地創建複雜、響應式的佈局。

祝賀你，未來的網格大師！快樂編碼！

Credits: Image by storyset