CSS Grid通过display: grid实现二维布局，使用grid-template-columns/rows定义行列，gap设置间距，grid-area控制子元素位置，支持命名区域与响应式设计，适合复杂页面结构。
CSS Grid 是实现多行多列复杂布局最强大的工具之一。它允许你在一个二维平面上精确控制行和列的分布，非常适合构建仪表盘、卡片网格、表单排版等复杂结构。
定义基本网格容器
要使用 Grid 布局，先将父元素设为 display: grid，然后通过 grid-template-columns 和 grid-template-rows 定义行列结构。
示例：
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列是两边的两倍宽 */ grid-template-rows: 100px auto 80px; /* 三行，高度分别为100px、自适应、80px */ gap: 10px; /* 行列间距 */ }
使用 grid-area 精确控制子元素位置
每个子元素可以通过 grid-column 和 grid-row 指定起始和结束线，或直接用 grid-area 一次性定义。
常用属性说明：
- grid-column: 1 / 3; —— 占据第1到第3条垂直线（跨两列）
- grid-row: 2 / 4; —— 占据第2到第4条水平线（跨两行）
- grid-area: 2 / 1 / 3 / 4; —— 行起/行终/列起/列终
实用技巧：命名区域更直观
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; grid-template-rows: 60px 1fr 50px; grid-template-columns: 200px 1fr 1fr; } <p>.header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }
这种方式让布局结构一目了然，适合页面级框架设计。
响应式与自动填充策略
在实际项目中，常配合 minmax() 和 repeat() 实现灵活响应式布局。
例如创建一个自适应卡片网格：
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
这表示：自动重复列，每列最小250px，最大为1fr（均分剩余空间），屏幕变窄时自动换行。
结合 @media 查询可进一步优化不同设备下的表现：
@media (max-width: 768px) { .container { grid-template-areas: "header" "main" "sidebar" "footer"; grid-template-columns: 1fr; } }
基本上就这些核心方法。掌握好容器定义、区域划分和响应式策略，就能轻松应对大多数复杂布局需求。关键是理解网格线和轨道的概念，多练习几次就能熟练运用。不复杂但容易忽略细节，比如 gap 不包含在 grid 高度内，或者 grid-area 必须确保命名一致。