2.5 CSS Grid 网格布局
2.5 CSS Grid 网格布局
CSS Grid 布局是一个二维布局系统，可以同时处理水平和垂直方向的布局。与 Flexbox 主要处理一维布局不同，Grid 提供了更强大的布局能力，适用于更复杂的网页布局。
Grid 使得创建复杂的布局变得更加简单和灵活，支持精确的行和列控制，能够轻松实现响应式设计。
1. Grid 布局的基本结构
CSS Grid 的核心是 网格容器（grid container）和 网格项目（grid items）。网格容器中的项目根据定义的行和列进行排列，容器本身通过 display: grid 或 display: inline-grid 来定义。
.container {
display: grid; /* 创建一个网格容器 */
}
.item {
/* 每个直接子元素是一个网格项目 */
}
2. 定义网格的行和列
使用 CSS Grid，我们可以通过设置容器的行和列来定义网格的结构。最常用的属性包括：
2.1 grid-template-columns 和 grid-template-rows
这两个属性分别用来定义网格的列和行。
grid-template-columns：定义网格列的宽度。grid-template-rows：定义网格行的高度。
这些属性接受具体的值，可以是固定值（如像素）、百分比值、或者灵活的 fr 单位（分配剩余空间）。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列，第一列和第三列宽度相等，中间列是两倍 */
grid-template-rows: 100px auto 200px; /* 三行，第一行 100px，第二行自适应高度，第三行 200px */
}
在上面的例子中，1fr 2fr 1fr 表示三个列的宽度按比例分配。fr（fraction）是 Grid 布局的一个单位，表示可用空间的分数。
2.2 grid-template-areas
grid-template-areas 允许你为网格定义命名区域，使得布局更加直观和易于管理。每个区域用一组命名的标识符表示。
.container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 100px 100px;
grid-template-areas:
"header header header"
"main sidebar footer";
}
在这个例子中，我们定义了一个 3 列 2 行的网格，并通过 grid-template-areas 让每个区域都拥有名称。这样在布局中就可以更加简洁地管理不同的区域。
3. 网格项目的定位
通过设置网格项目的 行和列位置，我们可以指定项目在网格中的位置。
3.1 grid-column 和 grid-row
grid-column 和 grid-row 用于控制单个项目跨越的列和行。
grid-column：控制项目在列上的开始和结束位置。grid-row：控制项目在行上的开始和结束位置。
这些属性支持两个值，表示项目的起始位置和结束位置。例如，grid-column: 1 / 3 表示该项目从第一列开始，跨越两列直到第三列。
.item {
grid-column: 1 / 3; /* 跨越第一列到第三列 */
grid-row: 1 / 2; /* 跨越第一行到第二行 */
}
3.2 span 关键字
span 关键字可以让项目跨越多个列或行。例如，grid-column: span 2 表示项目在列方向上跨越两个单元格。
.item {
grid-column: span 2; /* 跨越两列 */
grid-row: span 2; /* 跨越两行 */
}
4. 控制项目的对齐
Grid 布局提供了多种方法来对齐项目，包括：
4.1 justify-items 和 align-items
justify-items：沿水平方向（主轴）对齐所有项目。align-items：沿垂直方向（交叉轴）对齐所有项目。
.container {
display: grid;
justify-items: center; /* 水平方向居中对齐 */
align-items: center; /* 垂直方向居中对齐 */
}
4.2 justify-self 和 align-self
这两个属性允许单个网格项目在各自的方向上进行对齐。
justify-self：单个项目在水平方向上对齐。align-self：单个项目在垂直方向上对齐。
.item {
justify-self: start; /* 项目在水平方向上靠左对齐 */
align-self: end; /* 项目在垂直方向上靠底部对齐 */
}
5. 创建响应式布局
Grid 布局非常适合用于创建响应式网页布局。通过结合 fr 单位、minmax() 函数和 auto-fill 或 auto-fit，我们可以轻松创建自适应的网格布局。
5.1 使用 minmax() 适应不同屏幕宽度
minmax() 函数允许我们指定一个列或行的最小值和最大值。这样在不同屏幕宽度下，网格会自动调整。
.container {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
在这个例子中，minmax(200px, 1fr) 表示每一列的宽度最小为 200px，最大为 1fr（占用剩余空间）。
5.2 使用 auto-fill 或 auto-fit
auto-fill 和 auto-fit 允许我们自动填充网格容器。它们的不同之处在于：
auto-fill：会填充尽可能多的列，且即使列宽变小，也会保持列的数量。auto-fit：会根据网格容器的宽度动态调整列的数量，去掉空白列。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
在这个例子中，网格容器会根据可用空间自动调整列的数量，每列的最小宽度为 200px。
6. 完整示例
下面是一个完整的 Grid 布局示例，展示了如何定义行、列、以及如何使用网格项目定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 布局示例</title>
<style>
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr;
grid-gap: 20px;
grid-template-areas:
"header header header"
"sidebar main footer";
}
.header {
grid-area: header;
background-color: #f1f1f1;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
background-color: #f4f4f4;
padding: 20px;
}
.main {
grid-area: main;
background-color: #ffffff;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
在这个示例中：
- 使用了
grid-template-areas来为网格区域命名，使得布局更加清晰。 - 定义了一个三列两行的布局，使用
grid-gap设置网格项之间的间距。 - 每个网格项通过
grid-area来指定其所在的区域。
7. 总结
- Grid 容器：通过
display: grid;创建，容器内的项目会按行列排列。 - 网格列和行：通过
grid-template-columns和grid-template-rows来定义。 - 网格项目定位：使用
grid-column和grid-row来指定项目的位置和跨越的行列数。 - 响应式布局：通过
minmax()、auto-fill和auto-fit实现自适应布局。
CSS Grid 提供了强大的布局功能，使得设计复杂布局变得简单灵活，非常适合用来构建现代的网页布局。