CSS Grid 生成器
通过图形界面调整 grid-template-columns/rows、justify-items、align-items 和 gap，实时预览真实的 CSS Grid 布局效果，并一键复制生成的 CSS 代码。
使用提示
- grid-template-columns: repeat(3, 1fr) 中的 fr 单位表示"按比例分配剩余空间"，与像素等固定值不同，即使视口宽度变化，列的比例也保持不变。
- gap 属性只影响行与列之间的间距，不像 margin 那样会影响网格外部。你还可以分别设置 row-gap 和 column-gap。
- 设为"auto"的轨道会根据内容的实际大小自动伸缩，适合内容长度不固定的列或行。
- 为单个项目设置 grid-column: span 2 之类的覆盖值，可以让页眉或页脚横跨整个网格宽度。
- 需要复杂的网格状布局时选择 Grid，只需单方向（一行或一列）排列时选择 Flexbox 即可（另请参阅我们的 CSS Flexbox 生成器）。
常见问题
当你需要同时控制行和列时，比如整体页面骨架或仪表盘布局，适合使用 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"已成为一种常见约定。两者并非竞争关系，而是各有所长的互补工具——一维排列与二维网格布局——在同一个页面中同时使用两者已被视为标准做法。