📐 Grid布局器
二维网格 · 实时预览 · fr单位
1
2
3
4
5
6
二维网格 · 实时预览 · fr单位
Flexbox适合一维布局（单行或单列），Grid适合二维布局（行和列同时控制）。复杂页面布局首选Grid，组件排列首选Flexbox。两者可以组合使用。
fr（fraction）是Grid专用的分数单位。例如1fr 2fr表示第二列是第一列宽度的两倍。fr让等分和比例分配变得非常简单，无需calc()。
使用repeat(auto-fill, minmax(200px, 1fr))可以在不写media query的情况下让列数随容器宽度自适应。列宽不足200px时自动换行。
它们是同一个属性的新旧写法，grid-gap是早期命名，现在已统一为gap，同时作用于行和列。gap: 20px表示行列间距都是20px，gap: 20px 10px表示行间距20px、列间距10px。
用grid-column和grid-row属性。grid-column: 1 / 3让元素从第1条网格线跨到第3条（占2列）；grid-column: span 2表示跨2列。跨行同理用grid-row。这样可以做出不对称的混合布局。
justify-items控制单元格内水平对齐，align-items控制垂直对齐，place-items是两者合写。例如place-items: center让所有子元素在各自单元格内水平和垂直都居中。它们的设置优先级会被子元素自己的justify-self/align-self覆盖。
它决定没有明确指定位置时，子元素按什么顺序自动放入网格。默认是row（按行优先填充），改成column则按列填充，加dense可以让后面的元素回填前面留下的空格，减少视觉空洞。
现代浏览器（Chrome、Firefox、Safari、Edge）全部原生支持Grid，无需前缀。只有IE11需要加-ms-前缀且只支持旧语法，如今IE已经停服，基本可以放心全用标准Grid。
Grid 和 Flexbox 是现代 CSS 布局的两大核心工具。简单来说：Flexbox 是一维布局工具，适合处理单行或单列中的元素排列；Grid 是二维布局工具，能同时控制行和列。
| 需求 | 推荐 | 理由 |
|---|---|---|
| 整体页面布局 | Grid | 同时控制行和列 |
| 导航栏/工具栏 | Flexbox | 单行排列、间距可控 |
| 卡片网格列表 | Grid | 行列自动对齐、gap统一 |
| 组件内部排列/居中 | Flexbox | 一行代码搞定居中 |
grid-template-areas 是 Grid 布局中最直观的方式，用命名字符串定义页面区域。每个引号内的字符串代表一行，空格分隔代表不同列。
| CSS 属性值 | 对应含义 |
|---|---|
| "header header header" | 第一行三列合并，区域名为 header |
| "nav main aside" | 第二行三列分开，分别为 nav/main/aside |
| "footer footer footer" | 第三行三列合并，区域名为 footer |
用 grid-area 属性给每个子元素命名后，即可用 grid-template-areas 自由排列，无需调整 HTML 结构。
auto-fit 和 auto-fill 都配合 minmax() 使用，但它们处理空轨道的方式不同：
| 属性 | 空轨道处理 | 视觉效果 |
|---|---|---|
| auto-fill | 保留空轨道 | 网格项不足时留下空白列 |
| auto-fit | 折叠空轨道 | 剩余空间均分给现有项，填满容器 |
在实际项目中，Grid 和 Flexbox 往往一起使用：
| 层级 | 技术 | 职责 |
|---|---|---|
| 最外层 | Grid | 划分 header/main/footer/sidebar |
| header 内 | Flexbox | 排列 logo + 导航菜单 |
| main 内 | Grid | 排列卡片网格 |
| 卡片内部 | Flexbox | 排列图片/标题/按钮 |
这种"大 Grid + 小 Flexbox"的策略兼顾了二维布局的灵活性和一维对齐的便利性。
| 属性 | 作用 | 示例值 |
|---|---|---|
| grid-template-columns | 定义列的宽度分布 | repeat(3, 1fr) / 200px 1fr 2fr |
| grid-template-rows | 定义行的高度分布 | 100px auto / repeat(2, 1fr) |
| gap / grid-gap | 行列间距 | 10px / 10px 20px（行间距 列间距） |
| grid-column | 子元素跨越的列 | span 2 / 1 / 3（从第1条线到第3条线） |
| grid-row | 子元素跨越的行 | span 2 / 1 / -1（到最后一根线） |
| grid-area | 子元素命名或定位 | header / 1/1/2/4（行起/列起/行终/列终） |
| justify-items | 水平对齐方式 | start / center / end / stretch |
| align-items | 垂直对齐方式 | start / center / end / stretch |
| place-items | 水平+垂直对齐简写 | center / start stretch |
| 维度 | Grid | Flexbox |
|---|---|---|
| 布局维度 | 二维（行×列） | 一维（行或列） |
| 核心概念 | 网格线、网格区域、轨道 | 主轴、交叉轴、弹性容器 |
| 等分空间 | fr 单位 | flex-grow / flex-basis |
| 间距 | gap / row-gap / column-gap | gap（较新浏览器）/ margin |
| 换行 | 无需换行概念，直接定义行列 | flex-wrap: wrap |
| 对齐 | justify/align/place-items + content | justify/align/place-content + items + self |
| 最佳场景 | 整体页面布局、复杂网格 | 组件内部排列、导航栏、居中 |
| 兼容性 | 所有现代浏览器 | 所有现代浏览器（IE10+支持旧语法） |
1. 设置列数和行数。
2. 调整gap间距。
3. 查看实时网格预览。
4. 复制生成的CSS代码。