CSS3 网格布局

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 网格布局在现代网页设计中越来越受欢迎，因为它提供了更简单、灵活且强大的布局控制。