CSS3 网格布局（CSS Grid Layout）是一种强大的布局方式，用于创建复杂的网页布局。它允许你以网格的形式将页面划分为行和列，然后将内容放置在这些行和列的交叉点上。以下是 CSS3 网格布局的基本概念和用法：
1. **创建网格容器**：
首先，你需要定义一个网格容器，通过设置其 `display` 属性为 `grid` 或 `inline-grid` 来实现。这会将容器变成一个网格布局容器。
.grid-container {
display: grid;
}
2. **定义网格结构**：
使用 `grid-template-rows` 和 `grid-template-columns` 属性来定义网格的行和列结构。你可以使用像 `1fr`、`auto`、`20px` 这样的值来定义行高和列宽。
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr 1fr;
}
3. **放置内容**：
通过设置子元素的 `grid-row` 和 `grid-column` 属性，将内容放置到特定的网格单元中。你可以使用 `span` 来指定内容跨越多个单元格。
.item1 {
grid-row: 1 / 2;
grid-column: 1 / 3;
}
.item2 {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
4. **自动网格布局**：
你还可以使用 `grid-auto-rows` 和 `grid-auto-columns` 属性，指定当内容没有明确位置时，如何分配行和列。
.grid-container {
grid-auto-rows: 100px;
grid-auto-columns: 1fr;
}
5. **网格间距和对齐**：
你可以使用 `grid-gap` 属性来设置行和列之间的间距。还可以使用 `justify-content` 和 `align-content` 属性来定义整个网格容器的对齐方式。
.grid-container {
grid-gap: 10px;
justify-content: center;
align-content: center;
}
6. **响应式布局**：
CSS 网格布局也适用于响应式布局。你可以使用媒体查询来在不同屏幕尺寸下改变网格的结构和布局。
这些是 CSS3 网格布局的基本用法。它提供了强大的布局工具，可用于创建复杂的网页布局，而无需大量的嵌套和调整。 CSS 网格布局在现代网页设计中越来越受欢迎，因为它提供了更简单、灵活且强大的布局控制。