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结构如下：
1
2
3
4
5
6
这个容器会生成一个 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 快速搭建仪表盘、图片墙、多栏内容区等复杂布局，不复杂但容易忽略细节。
