无需登录 数据私有 本地保存

CSS Grid 可视化速查表 - 所有属性一览

CSS 学习 CSS Grid 可视化 属性 速查
20
0
0
0

CSS Grid 可视化速查表

所有 Grid 容器与项目属性一览，每个属性均附带可视化演示，助你快速理解与查阅。

18+ 容器属性 10+ 项目属性 可视化 Demo 点击语法复制
✓ 已复制到剪贴板

grid-template-columns 容器
grid-template-columns: 1fr 2fr 1fr;

定义网格列轨道。支持 fr（弹性份数）、px、%、auto、minmax()、repeat() 等。

1fr
2fr
1fr
1fr 2fr 1fr
grid-template-rows 容器
grid-template-rows: 60px auto 40px;

定义网格行轨道。常用固定高度 + auto 实现头部固定、底部固定、中间自适应布局。

60px
auto
auto
40px
60px / auto / 40px
grid-template-areas 容器
grid-template-areas: "header header"
"sidebar main"
"footer footer";

使用命名区域定义布局，直观如画草图。配合子元素 grid-area 使用。

H
S
M
F
header / sidebar / main / footer
grid-auto-columns 容器
grid-auto-columns: 80px;

设置隐式创建的列宽（当子元素超出显式定义的列数时自动生成）。

1
2
3
4
显式2列 + 隐式 auto 列
grid-auto-rows 容器
grid-auto-rows: 50px;

设置隐式创建的行高。当子元素超出显式行数时，新行使用此高度。

1
2
3
4
5
显式1行22px + 隐式行18px
grid-auto-flow 容器
grid-auto-flow: row dense;

控制自动放置子元素的方向：row（按行）、column（按列）、dense（紧密填充空洞）。

1
2
3
4
5
auto-flow: column（按列排列）

gap / row-gap / column-gap 容器
gap: 16px 24px;

设置行列间距。row-gap 行间距，column-gap 列间距，gap 为简写。

1
2
3
4
5
6
行距6px / 列距12px
justify-items 容器
justify-items: center;

子元素在行轴（水平）上的对齐方式：start | end | center | stretch（默认）。

1
2
3
justify-items: center
align-items 容器
align-items: end;

子元素在列轴（垂直）上的对齐方式：start | end | center | stretch（默认）。

1
2
3
align-items: end（底部对齐）
justify-content 容器
justify-content: space-between;

整个网格在容器水平方向的分布。需网格总宽 < 容器宽。start | end | center | space-between | space-around | space-evenly。

1
2
3
space-between
align-content 容器
align-content: center;

整个网格在容器垂直方向的分布。需网格总高 < 容器高。取值同 justify-content。

1
2
3
4
align-content: center
place-items 容器
place-items: center stretch;

align-items 与 justify-items 的简写。第一个值对应 align，第二个对应 justify。

1
2
place-items: center
place-content 容器
place-content: center;

align-content 与 justify-content 的简写。一个值同时设置两个方向。

1
2
3
4
place-content: center（双轴居中）

grid-column-start / grid-column-end 项目
grid-column-start: 2;
grid-column-end: 4;

指定子元素在列上的起始/结束网格线位置。可以使用数字、命名线、span 关键词。

1
2-4
4
第2项跨越列线2→4
grid-column 项目
grid-column: 2 / span 2;

grid-column-start 和 grid-column-end 的简写。用 / 分隔。span N 表示跨越N列。

1
2/span2
4
grid-column: 2 / span 2
grid-row 项目
grid-row: 1 / 3;

grid-row-start 和 grid-row-end 的简写。指定子元素跨越的行范围。

1/3
2
3
4
5
6
第1项跨越行线1→3
grid-area（项目定位） 项目
grid-area: 1 / 2 / 3 / 4;

一次性指定 row-start / col-start / row-end / col-end。也可用于引用 grid-template-areas 中的命名区域。

area
1
3
5
6
7
grid-area: 1/2/3/4

justify-self 项目
justify-self: end;

覆盖单个子元素在行轴上的对齐方式。取值：start | end | center | stretch。

1
2
3
第2项 justify-self: end
align-self 项目
align-self: start;

覆盖单个子元素在列轴上的对齐方式。取值同 justify-self。

1
2
3
第2项 align-self: start
place-self 项目
place-self: center;

align-self 与 justify-self 的简写。一个值同时设置两个方向。

1
2
第2项 place-self: center

属性 语法示例 说明 类型
grid-template grid-template: 'a a' 50px
'b c' 1fr / 1fr 2fr;		 同时设置 grid-template-rows、grid-template-columns、grid-template-areas 容器
grid grid: auto-flow dense / 1fr 1fr; 超级简写，可同时设置显式/隐式网格及自动流。不常直接使用，建议拆分为独立属性更清晰。 容器
minmax() minmax(100px, 1fr) 定义一个尺寸范围，最小不小于100px，最大不超过1fr。响应式网格的核心函数。 函数
repeat() repeat(4, 1fr) 重复生成轨道。支持 auto-fill / auto-fit 实现自适应列数。 函数
subgrid grid-template-columns: subgrid; 继承父网格的轨道定义，实现嵌套网格对齐。目前主流浏览器已支持。 项目
常见布局模式
📐 圣杯布局 (Holy Grail)

页头 + 三列内容区（两侧固定/中间自适应） + 页脚

header
L
main
R
footer
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
🎴 响应式卡片网格

自动适配列数，最小列宽200px，自动填充

1
2
3
4
5
6
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
📊 仪表盘布局

不规则卡片排布，使用 grid-area 精确定位

大卡片
3
4
宽卡片
使用 grid-column / grid-row 跨越不同区域
常见问题 FAQ
Q: CSS Grid 和 Flexbox 有什么区别？什么时候用哪个？
Grid 是二维布局系统（同时控制行和列），适合整体页面布局、卡片网格等。Flexbox 是一维布局（沿单一方向），适合导航栏、列表、表单行等。两者可以嵌套使用——Grid 容器内使用 Flexbox 排列子元素，反之亦然。
Q: 如何在 Grid 中居中一个元素？
最简单的方式：在容器上设置 place-items: center;（子元素在单元格内居中）。如需整个网格在容器中居中，使用 place-content: center;。也可以对单个子元素使用 place-self: center;。
Q: auto-fill 和 auto-fit 有什么区别？
auto-fill 会保留空轨道（即使没有内容填充），而 auto-fit 会折叠空轨道，让有内容的列扩展。实用建议：卡片网格用 auto-fit；需要固定列数占位用 auto-fill。
Q: fr 单位是什么？如何计算？
fr（fraction，份数）表示弹性比例。浏览器先分配固定尺寸（px、%、auto），剩余空间按 fr 比例分配。例如 1fr 2fr 表示第一列占剩余空间的1/3，第二列占2/3。
Q: 隐式网格（implicit grid）是什么？
当你定义的显式行列不够容纳所有子元素时，Grid 会自动创建新行（或列）。这些自动创建的就是隐式网格。使用 grid-auto-rows / grid-auto-columns 来控制隐式轨道的大小。
Q: Grid 的浏览器兼容性如何？
CSS Grid 在所有现代浏览器中都有优秀支持（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+），覆盖率超过97%。IE11 支持旧版语法（需加 -ms- 前缀），但建议不考虑 IE 兼容。
知识点速记
  • 容器属性写在父元素上（display: grid 的元素），项目属性写在子元素上。
  • 网格线编号从1开始，负数表示从末尾倒数（-1 = 最后一条线）。
  • span 关键词表示"跨越N条轨道"，如 grid-column: span 2 表示跨2列。
  • 使用浏览器 DevTools 的 Grid 检查器可以高亮显示网格线和区域，极大方便调试。
  • 简写属性虽方便，但显式写出每个属性可读性更好，推荐在团队项目中使用完整属性名。
🔧 相关工具