Grid 切版技巧
## CSS Grid 切版基本概念
CSS Grid 是用「列（column）」與「欄（row）」建立二維版面。通常會先將外層元素設定為 Grid 容器，再透過 `grid-template-columns`、`grid-template-rows` 或 `grid-template-areas` 規劃版面。
---
## 1. 設定 Grid 容器
```css
.container {
display: grid;
}
```
設定 `display: grid` 後，容器的直接子元素會成為 Grid 項目（grid items）。
也可以使用：
```css
.container {
display: inline-grid;
}
```
差別在於：
- `grid`：容器本身是區塊元素，通常會佔滿可用寬度。
- `inline-grid`：容器本身會像行內元素一樣排列。
一般切版最常使用：
```css
display: grid;
```
---
## 2. 設定欄位：`grid-template-columns`
```css
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
```
表示版面分成三欄：
```text
200px | 剩餘空間 | 200px
```
### 常見單位
#### 固定寬度
```css
grid-template-columns: 200px 300px;
```
建立兩欄，寬度分別為 `200px` 與 `300px`。
#### `fr` 彈性單位
```css
grid-template-columns: 1fr 2fr;
```
可用空間分成三份：
```text
第一欄：1 份
第二欄：2 份
```
#### 重複欄位：`repeat()`
```css
grid-template-columns: repeat(3, 1fr);
```
等同於：
```css
grid-template-columns: 1fr 1fr 1fr;
```
常用於卡片排版：
```css
grid-template-columns: repeat(4, 1fr);
```
表示四欄平均寬度。
---
## 3. 設定列高：`grid-template-rows`
```css
.container {
display: grid;
grid-template-rows: 80px 1fr 60px;
}
```
表示：
```text
第一列：80px
中間列：剩餘空間
最後一列：60px
```
也可以使用：
```css
grid-template-rows: auto 1fr auto;
```
讓列高依內容或剩餘空間自動調整。
---
## 4. 使用 `grid-template-areas` 規劃區域
`grid-template-areas` 可以用名稱描述版面，適合製作頁首、側欄、主內容與頁尾。
```css
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
```
每一行代表一列，每個名稱代表一個區域。
---
## 5. 設定區塊位置：`grid-area`
子元素可以透過 `grid-area` 對應到指定區域：
```css
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
```
---
## 簡單版面案例
### HTML
```html
<div class="layout">
<header class="header">
網站標題
</header>
<aside class="sidebar">
側邊選單
</aside>
<main class="main">
<h1>主要內容</h1>
<p>這裡是網站的主要內容區域。</p>
</main>
<footer class="footer">
Copyright © 2025
</footer>
</div>
```
### CSS
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.layout {
min-height: 100vh;
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 12px;
padding: 12px;
background: #f2f2f2;
}
.header {
grid-area: header;
padding: 20px;
background: #4c6ef5;
color: white;
}
.sidebar {
grid-area: sidebar;
padding: 20px;
background: #dbe4ff;
}
.main {
grid-area: main;
padding: 20px;
background: white;
}
.footer {
grid-area: footer;
padding: 20px;
background: #343a40;
color: white;
}
```
產生的版面大致如下：
```text
┌──────────────────────────────┐
│ Header │
├───────────┬──────────────────┤
│ Sidebar │ Main │
├───────────┴──────────────────┤
│ Footer │
└──────────────────────────────┘
```
---
## 常用設定整理
```css
.container {
display: grid;
/* 欄數與欄寬 */
grid-template-columns: 200px 1fr 1fr;
/* 列數與列高 */
grid-template-rows: auto 1fr auto;
/* 區域配置 */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
/* 格線間距 */
gap: 20px;
}
```
其中最常用的組合是：
```css
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"sidebar main";
```
先用 `display: grid` 啟用 Grid，再用 `grid-template-columns` 或 `grid-template-areas` 定義版面結構。
相關學習地圖、教學課程
F2E 網站前端工程