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