DAY14：CSS 佈局：網格系統（Grid）

2024 iThome 鐵人賽

DAY 14

自我挑戰組

前端基礎：HTML 和 CSS 的 30 天學習之旅系列第 14 篇

16th鐵人賽

wujia0224

2024-09-28 22:06:44

87 瀏覽

分享至

CSS Grid 是什麼？

CSS Grid Layout 是一種基於二維網格的佈局系統，允許你在行和列的軸上同時進行佈局和對齊。
它比 Flexbox 更加靈活，能夠設計出更複雜的佈局，特別適合多列、多行的網頁設計。

網格容器和網格項目

網格容器（Grid Container）：是應用網格佈局的父元素，內部的所有直接子元素被稱為 網格項目（Grid Items）。
- 使用 display: grid 將元素設置為網格容器。
- 網格容器中的子元素會自動排列在指定的行和列中。

CSS Grid 的核心概念與屬性

1. 定義網格

grid-template-columns 和 grid-template-rows：設置網格的列和行。
- 使用單位來定義每一列和行的大小，例如 px, fr（fraction, 分數單位）, auto, %。
- 範例：grid-template-columns: 1fr 2fr;（第一列占據 1 份空間，第二列占據 2 份空間）。

grid-template-areas：通過命名區域來簡化網格項目的佈局。

範例：

grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

2. 放置網格項目

grid-column 和 grid-row：控制網格項目橫跨的行或列。
- 範例：grid-column: 1 / 3;（項目橫跨第 1 列到第 3 列）。
grid-area：將網格項目放置在特定的命名區域中，與 grid-template-areas 搭配使用。
- 範例：grid-area: header; 將項目放置在 header 區域。

3. 控制網格間距

grid-gap、column-gap、row-gap：設置網格項目之間的間距。
- 範例：grid-gap: 10px; 設置行和列之間的間距為 10px。

常用屬性詳解

1. 網格容器屬性

display: grid：定義元素為網格容器。
grid-template-columns：定義列的數量及寬度。
grid-template-rows：定義行的數量及高度。
grid-template-areas：為網格項目定義命名區域。
justify-items：設置網格項目在水平方向的對齊方式。
align-items：設置網格項目在垂直方向的對齊方式。

2. 網格項目屬性

grid-column-start、grid-column-end：控制網格項目從哪一列開始，到哪一列結束。
grid-row-start、grid-row-end：控制網格項目從哪一行開始，到哪一行結束。
grid-area：指定網格項目放置在哪一個區域。

實作

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Grid Layout Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 200px auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-gap: 10px;
}
.header {
  grid-area: header;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
}
.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
  padding: 20px;
}
.content {
  grid-area: content;
  background-color: lightcoral;
  padding: 20px;
}
.footer {
  grid-area: footer;
  background-color: lightgray;
  text-align: center;
  padding: 20px;
}

網頁呈下圖: