跳到主要内容

第三节 网格化管理

在网页设计中，面对复杂的页面结构（如相册展示、电商商品列表、后台管理数据看板等），传统的排版方式往往显得力不从心。CSS 网格布局（Grid Layout）是目前 Web 前端最强大的二维布局系统，它能够让我们像在纸上画表格一样，精准地划分网页的行与列。

一、认识网格布局（CSS Grid）​

网格布局将网页划分成一个个网格，我们可以自由地将 HTML 元素放入这些预设好的网格中。与之前学习的单向布局不同，Grid 可以同时控制水平（列）和垂直（行）两个方向。 在使用网格布局时，我们需要了解两个核心概念： 网格容器（Grid Container）：应用了 display: grid; 样式的父元素。 网格项目（Grid Item）：网格容器内部的直接子元素。

二、开启网格与划分行列​

要使用网格布局，首先需要在父元素上开启 Grid 模式，并定义好需要多少列、多少行。

<div class="grid-container">
    <div class="item">模块 1</div>
    <div class="item">模块 2</div>
    <div class="item">模块 3</div>
    <div class="item">模块 4</div>
</div>
/* CSS 样式 */
.grid-container {
    display: grid; /* 开启网格布局 */
    grid-template-columns: 200px 200px 200px; /* 定义 3 列，每列宽 200px */
    grid-template-rows: 100px 100px; /* 定义 2 行，每行高 100px */
}

三、灵活的比例单位：fr​

在实际的响应式开发中，写死像素（px）往往无法适配不同大小的屏幕。CSS Grid 提供了一个专属的弹性单位：fr（fraction，片段）。它代表网格容器中可用空间的一等份。

.grid-container {
    display: grid;
    /* 将父元素的总宽度分为 3 等份，每列占 1 份，实现完美的三等分自适应布局 */
    grid-template-columns: 1fr 1fr 1fr;
}

如果将其修改为 grid-template-columns: 1fr 2fr 1fr;，则表示中间的列宽度是左右两边列宽度的两倍。这种方式在划分网页主侧边栏时非常高效。

四、控制网格间距（Gap）​

在之前的学习中，我们通常使用 margin 来控制元素之间的距离。但在网格布局中，有一个更简单、更直观的属性 gap，它可以一键设置所有网格项目之间的缝隙，且不会在最外围产生多余的边距。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; /* 设置行与行、列与列之间的间距均为 20 像素 */
}

五、借助通义灵码生成复杂网格​

网格布局的功能非常强大，其属性组合也相对较多。对于初学者而言，可以通过 AI 工具辅助生成基础的网格代码。 实操演示：向通义灵码提问 在代码编辑器中，唤出通义灵码对话框，输入类似以下提示词： "请用 CSS Grid 帮我写一个网页布局：顶部是 header 占满整行，中间分为左侧 200px 的导航栏和右侧自适应宽度的内容区，底部是 footer 占满整行。请提供 HTML 和 CSS，并加上代码注释。" 获得代码后，学生可以将其复制到自己的文件中，通过修改 fr 的数值或 gap 的大小，直观地观察页面结构的变化，从而加深对网格化管理的理解。