CSS Grid 生成器

通过图形界面调整 grid-template-columns/rows、justify-items、align-items 和 gap，实时预览真实的 CSS Grid 布局效果，并一键复制生成的 CSS 代码。

最后更新: 2026-09-20

边动手边搭 CSS Grid 布局

CSS Grid 是能同时照管行与列的二维布局之法。本工具让您在画面上切换 `grid-template-columns`／`rows`、`justify-items`、`align-items` 与 `gap`，边改边看结果，并把写成的 CSS 复制出去。

**与 Flexbox 的取舍，只消想「是一条轴还是两条轴」，便不会犹疑。** 只要排成一行，Flexbox 便够；**若要行与列同时对齐，如表格那般的排布，Grid 才更合适。** Grid 独有的长处在 `fr` 这个单位，它表示「剩余空间的份额」：写作 `1fr 2fr`，余下的宽度便按一比二分。**另一件值得记牢的，是 `repeat(auto-fit, minmax(200px, 1fr))` 这一写法。** 单凭它，便能得到**一种列数随宽度增减、却一条媒体查询也不必写的布局**。

使用方法

从预设起步三栏、页首配侧栏等常用样式都已备好。
改动列与行的定义 **用 `fr` 便可把剩余的空间按比例分开。**
试一试对齐的属性 `justify-items` 与 `align-items` 定下每个单元格内内容的落位。
复制生成的 CSS 排布中意之后，便可原样贴进您的代码。

用好本工具的小技巧

grid-template-columns: repeat(3, 1fr) 中的 fr 单位表示"按比例分配剩余空间"，与像素等固定值不同，即使视口宽度变化，列的比例也保持不变。
gap 属性只影响行与列之间的间距，不像 margin 那样会影响网格外部。你还可以分别设置 row-gap 和 column-gap。
设为"auto"的轨道会根据内容的实际大小自动伸缩，适合内容长度不固定的列或行。
为单个项目设置 grid-column: span 2 之类的覆盖值，可以让页眉或页脚横跨整个网格宽度。
需要复杂的网格状布局时选择 Grid，只需单方向（一行或一列）排列时选择 Flexbox 即可（另请参阅我们的 CSS Flexbox 生成器）。

这些场景会用到

搭起整页的骨架

**页首、侧栏、正文与页脚的摆放，正是 Grid 的拿手好戏。**

把卡片排成方格

**`auto-fit` 与 `minmax` 一配，列数便随屏幕宽度而变。**

对齐一张表单

把标签与输入框的列对齐，纵向的线便通了，读来省力得多。

学习 Grid

改一个值看一眼结果，行与列是怎样定下的便一清二楚。

CSS Grid 的术语

网格容器: 被赋予 `display: grid` 的父元素。行与列便定义在它之内。
fr: **表示剩余空间份额的单位。** 写作 `1fr 2fr`，余下的宽度便按一比二分。
grid-template-columns: 定义列的次第与宽度。用 `repeat()` 可免去重复书写同一取值。
minmax: 给出最小值与最大值的函数。**`minmax(200px, 1fr)` 意即「先保住 200 像素，有余便长」。**
auto-fit: 放得下多少便造多少列的关键字。**与 `minmax` 相配，无须任何媒体查询便能换行。**
gap: 行与列之间所留的空隙。两个方向可分别设定。

常见问题

当你需要同时控制行和列时，比如整体页面骨架或仪表盘布局，适合使用 CSS Grid。当只需单一方向（一行或一列）排列时，比如导航栏或一排卡片，Flexbox 会更简洁。很多实际页面会同时使用两者：整体骨架用 Grid，组件内部用 Flexbox。

fr 是"fraction（比例）"的缩写，表示容器内剩余空间按指定比例分配的单位。例如 grid-template-columns: 1fr 2fr 会让第二列的宽度是第一列的两倍。与 px 等绝对单位不同，fr 轨道会在容器尺寸变化时保持比例不变。

repeat() 是用于重复相同轨道模式的函数，repeat(3, 1fr) 等价于写成 grid-template-columns: 1fr 1fr 1fr。即使列数很多或需要动态变化，也只需指定重复次数和轨道大小两个参数即可简洁表达。

"圣杯"布局是一种经典的网页结构，由页眉、侧边栏、主内容区和页脚组合而成。在 CSS Grid 出现之前，需要使用 float 或表格标签等复杂的变通方法才能实现，而 grid-template-areas 等属性只需几行 CSS 就能重现这种常见布局。

grid-column: span N 会让该项目在水平方向上跨越 N 个轨道（列）。例如只给页眉元素设置 grid-column: span 3，就能让它横跨三列网格的整个宽度，而其他项目仍保持在各自的普通单元格中（grid-row 也支持同样的 span 写法）。

闲话 ― CSS Grid 追求的、Flexbox 未曾涉足的"第二维度"

CSS Grid Layout 被设计为一种二维布局系统，可以同时定义行和列，这与专注于单一方向排列的 Flexbox 形成对比。W3C 从 2011 年前后开始对其进行标准化，2017 年 Chrome、Firefox、Safari 和 Edge 几乎同步实现支持后，它在实际项目中的应用迅速普及开来。

在 Grid 出现之前，将页面排列成经典的"圣杯"结构——页眉、侧边栏、主内容和页脚——需要依赖 float 或表格标签等复杂的变通手段。CSS Grid 引入了 grid-template-columns、grid-template-rows、grid-template-areas 等声明式属性，让开发者只需几行 CSS 就能重现这种常见布局。

如今，仪表盘界面、图片画廊以及杂志风格的排版等许多围绕行列展开的设计工作都是用 CSS Grid 实现的。让嵌套网格继承父级轨道尺寸的"subgrid"特性也已在主流浏览器中逐步普及，使得保持复杂的多层布局一致性变得更加容易。

在实践中，"整体页面骨架用 Grid，组件内部元素排列用 Flexbox"已成为一种常见约定。两者并非竞争关系，而是各有所长的互补工具——一维排列与二维网格布局——在同一个页面中同时使用两者已被视为标准做法。

查看全部趣味知识