Web前端开发：Grid 布局（网格布局）
一、Grid 是什么？
Grid（网格布局） 是 CSS 中一种二维布局系统，可以同时控制行和列的排列方式。相比传统的浮动布局和 Flexbox（一维布局），Grid 更适合构建复杂的网页结构（比如仪表盘、卡片布局等）。
二、核心概念
1. 网格容器（Grid Container）
通过 display: grid 将一个元素定义为网格容器，它的直接子元素自动成为网格项目（Grid Items）。
.container {display: grid;
}2. 行与列（Rows & Columns）
-
轨道（Track）：行或列的集合
-
单元格（Cell）：行和列的交叉区域
-
网格线（Grid Line）：分隔行或列的线（编号从 1 开始）
三、基础用法
1. 定义行列大小
.container {grid-template-columns: 100px 200px 1fr; /* 3列：100px、200px、剩余空间 */grid-template-rows: 50px auto; /* 2行：50px、自适应高度 */
}-
fr 单位：按比例分配剩余空间（类似“份”）
-
repeat()：简化重复值
grid-template-columns: repeat(3, 1fr);→ 3 列等宽
2. 间距控制
.container {gap: 10px; /* 行和列间距均为 10px */row-gap: 20px; /* 单独设置行间距 */column-gap: 15px;
}四、定位网格项目
1. 按网格线定位
.item {grid-column-start: 1; /* 起始于第1列线 */grid-column-end: 3; /* 结束于第3列线（跨2列） */grid-row: 2 / 4; /* 简写：从第2行线到第4行线 */
}2. 使用 span 关键字
.item {grid-column: 1 / span 2; /* 从第1列开始，跨越2列 */
}五、对齐方式
1. 整体对齐
.container {justify-content: center; /* 水平居中整个网格 */align-content: end; /* 垂直底部对齐 */
}2. 单元格内对齐
.container {justify-items: center; /* 所有项目水平居中 */align-items: stretch; /* 默认拉伸填满单元格 */
}/* 单独控制某个项目 */
.item {justify-self: start;align-self: end;
}
六、响应式布局技巧
1. 自动填充列
.container {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}-
auto-fill：自动填充尽可能多的列 -
minmax(200px, 1fr)：列宽最小 200px，最大按比例分配
2. 命名区域（适合复杂布局）
.container {grid-template-areas:"header header""sidebar main""footer footer";
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }七、Grid vs Flexbox
| 特性 | Grid | Flexbox |
|---|---|---|
| 维度 | 二维（行+列） | 一维（行或列） |
| 适用场景 | 整体页面布局 | 组件内部排列 |
| 内容优先 | 容器控制布局 | 内容决定布局 |