CSS Grid是一种二维布局系统，通过容器、网格线、轨道、单元格和区域等概念实现精确的行列表格控制。使用display: grid创建容器后，可利用grid-template-columns/rows定义结构，gap设置间距，并借助fr、minmax、repeat等函数提升灵活性。通过grid-template-areas命名区域可直观构建语义化布局，结合媒体查询或auto-fit能实现响应式设计，适用于复杂且自适应的现代网页界面。
CSS Grid网格布局是一种二维布局系统，专为在网页中设计复杂、灵活的页面结构而设计。它让开发者能以行和列的方式精确控制元素的位置与大小，是现代响应式设计的重要工具之一。
Grid布局的核心概念
理解Grid布局的关键在于掌握以下几个基本术语和结构：
- 容器（Grid Container）：应用display: grid或display: inline-grid的父元素，所有子元素自动成为网格项。
- 网格线（Grid Lines）：构成网格结构的分界线，可以是垂直或水平的，从1开始编号，也可使用负数反向引用。
- 网格轨道（Grid Track）：相邻两条网格线之间的空间，对应行或列。grid-template-rows和grid-template-columns用于定义轨道尺寸。
- 网格单元格（Grid Cell）：单个行与列交叉形成的基本单位，类似表格中的一个“格子”。
- 网格区域（Grid Area）：由多个单元格组成的矩形区域，可通过命名方式方便布局。
如何创建一个基本Grid布局
通过简单的CSS设置即可构建一个可用的网格结构。
示例HTML结构：
立即学习“前端免费学习笔记（深入）”；
HeaderSidebarMainFooter
对应的CSS样式：
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
.item1 { grid-column: 1 / 3; }
.item2 { grid-row: 2; }
.item3 { grid-row: 2; }
.item4 { grid-column: 1 / 3; }
这段代码创建了一个两列三行的布局，其中头部和底部横跨两列，侧边栏和主内容区在同一行并排显示。
常用属性与实用技巧
Grid提供了丰富的属性来增强布局灵活性。
- gap：设置行与列之间的间距，替代旧的margin手动计算。
- repeat()：简化重复轨道定义，如repeat(3, 1fr)表示三等分布局。
- minmax()：设定轨道尺寸范围，例如minmax(100px, 1fr)确保最小宽度同时允许扩展。
- fr单位：代表“分数”，按比例分配剩余空间，非常适合响应式设计。
- grid-template-areas：通过命名区域直观定义布局，适合语义化结构。
例如使用命名区域：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}
然后在子元素上使用grid-area: header等即可定位。
响应式Grid布局实践
结合媒体查询或auto-fit/auto-fill，Grid能轻松实现自适应效果。
例如创建一个随屏幕变化的卡片网格：
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
当容器宽度不足时，卡片会自动换行，每行尽可能容纳更多符合最小宽度的项目。
基本上就这些。Grid布局强大且直观，一旦掌握核心概念，就能高效构建各种复杂界面。关键是多练习定义容器、划分轨道、合理使用fr和minmax，逐步熟悉其行为模式。
