CSS Grid是一种二维布局系统,通过display: grid实现行列控制。使用grid-template-columns、grid-template-rows定义网格结构,gap设置间距,支持fr单位、repeat()函数和minmax()响应式布局,可精准定位元素位置,适用于复杂页面设计。

在现代网页设计中,网格布局(Grid Layout)是构建复杂页面结构的强有力工具。CSS Grid 布局模块让开发者能以二维方式(行和列)精确控制元素的位置和大小。下面介绍 HTML 和 CSS 中创建网格布局的基础概念与实用代码示例。
什么是CSS Grid网格布局?
CSS Grid 是一种二维布局系统,适用于将页面划分为多个区域,或定义组件之间的大小、位置和层级关系。它通过在容器上启用 display: grid 来激活,并通过设置行、列、间距和对齐方式来组织子元素。
主要优势包括:
- 灵活的行列定义,支持固定值、百分比或弹性单位(fr)
- 精准控制项目位置,无需依赖浮动或定位
- 支持响应式设计,可配合媒体查询动态调整布局
基本语法和结构
要使用网格布局,先定义一个容器并应用 display: grid,然后设置行和列的尺寸。
立即学习“前端免费学习笔记(深入)”;
.container {display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: 50px 100px;
gap: 10px;
}
说明:
- grid-template-columns:定义列的宽度,如三个列分别为 100px、200px 和剩余空间的 1 份
- grid-template-rows:定义行的高度
- gap:设置网格项之间的间距
HTML结构示例
结合上面的CSS,HTML结构如下:
这个容器会生成一个 3 列 2 行的网格,共容纳 6 个子元素。
常用技巧和扩展用法
实际开发中,可以使用更灵活的方式定义网格:
- 使用 repeat() 简化重复列定义:
grid-template-columns: repeat(3, 1fr)表示三列等宽 - 使用 minmax() 控制最小最大尺寸:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))实现响应式自适应列 - 通过 grid-column 和 grid-row 控制单个元素跨度:
.item { grid-column: span 2; }让元素横跨两列
基本上就这些。掌握基础后,你可以用 Grid 快速搭建仪表盘、图片墙、多栏内容区等复杂布局,不复杂但容易忽略细节。











