如何使用 CSS Grid 布局实现复杂页面设计？

要使用 CSS Grid 布局实现复杂页面设计，可以按照以下步骤进行：

1. 定义网格容器

首先，需要定义一个网格容器。网格容器是使用 CSS Grid 布局的父元素。通过设置 display: grid; 或 display: inline-grid; 来启用网格布局。

.grid-container {
    display: grid;
}

2. 定义网格行和列

使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。这些属性可以接受多个值，每个值代表一行或一列的宽度或高度。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr; /*设置三列，中间栏比两侧宽*/
    grid-template-rows: auto 1fr auto; /*自动调整行高，中间行填充剩余空间*/
}

3. 设置网格间距

使用 grid-gap 或 gap 属性来设置网格项之间的间隔。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px; /*网格间隙*/
}

4. 使用网格区域实现语义化布局

通过 grid-template-areas 属性来定义网格区域，并使用 grid-area 属性将元素分配到特定区域。

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

5. 控制网格项的位置和大小

使用 grid-column 和 grid-row 属性来控制网格项在网格中的位置。这些属性可以接受单个数字、关键字或数字与关键字的组合。

.grid-item {
    grid-column: 1 / 4; /*占据所有三列*/
    grid-row: 2; /*占据第二行*/
}

6. 响应式设计与自动网格布局

CSS Grid 提供了强大的响应式布局支持。可以通过媒体查询来调整网格布局以适应不同的屏幕尺寸。

@media screen and (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /*单列布局*/
        grid-template-rows: auto;
    }
}

7. 嵌套网格与对齐方式

CSS Grid 支持嵌套网格，可以在一个网格项内部创建另一个网格。此外，还可以使用 justify-items、align-items、justify-content 和 align-content 属性来控制网格项的对齐方式。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    justify-items: center; /*水平居中*/
    align-items: center; /*垂直居中*/
}

8. 实战案例

通过实际案例来加深对 CSS Grid 的理解。例如，创建一个包含头部、侧边栏、主要内容区和页脚的三栏布局。

<div class="grid-container">
    <div class="header">头部</div>
    <div class="sidebar">侧边栏</div>
    <div class="content">主要内容区</div>
    <div class="footer">页脚</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

.head