1.1 Grid Layout 的基本原則
CSS Grid Layout 是個超強大的工具，用來設計複雜且具有適應性的版面。它提供開發者一個二維的網格系統來放置元素，讓簡單或複雜的版面設計變得更簡單一些。讓我們來看看 CSS Grid 的基本概念和語法，不深入到特定屬性。
CSS Grid 的基本概念
-
Grid 容器和 Grid 元素：
-
Grid 容器 是一個包含
display: grid的元素。這個元素會變成網格的容器，而它的直接子元素會變成 Grid 元素。 - Grid 元素 是 Grid 容器的直接子元素，它們被放置在網格中。
-
Grid 容器 是一個包含
-
網格軸：
- 主軸 (inline axis) 和 塊軸 (block axis)：Grid 支援兩個放置元素的軸 - 主軸和塊軸。預設上，主軸是水平的，塊軸是垂直的。
-
網格單元 (Grid Cells)：
- 網格單元 是由行和列交叉形成的基本區塊。每個 Grid 元素佔用一個或多個單元。
-
網格線 (Grid Lines)：
- 網格線 是分隔行和列的水平和垂直線。它們用來根據網格放置元素。
-
網格區域 (Grid Areas)：
- 網格區域 是由多個單元合併而成的命名區域。它們允許將單元分組，並在特定區域放置元素。
1.2 語法元素
CSS Grid 的主要語法元素
1. 創建 Grid 容器：
.container {
display: grid; /* 或 display: inline-grid */
}
2. 定義網格結構：
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 定義三個不同寬度的列 */
grid-template-rows: 50px 100px; /* 定義兩個不同高度的行 */
}
3. 使用 grid-area 合併單元：
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* 元素佔據第一行和前三列 */
}
4. 自動放置元素：
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* 設置行的最小高度 */
}
1.3 範例
使用 CSS Grid 的簡單版面：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
說明：
- 容器 .container 設定了三個列，第一和第三個占據相同的空間比例，而第二個占兩倍的空間。
- 設定了兩個固定高度的行。
- 屬性 gap 設定了網格單元之間的距離。
GO TO FULL VERSION