CSS Grid 生成器
免费在线 CSS Grid 布局生成工具，可视化编辑
CSS Grid 布局基础
CSS Grid 是用于在行和列中排列元素的二维布局系统。关键属性：grid-template-columns 定义列轨道，grid-template-rows 定义行轨道，gap 控制间距，grid-area 定位项目。Grid 擅长页面级布局。
如何使用网格生成器
设置列数和行数。预览显示网格布局。调整大小和间距。复制生成的 CSS 代码用于你的项目。
▶何时应该使用 Grid 而非 Flexbox？
Grid 用于二维布局（同时需要行和列）。Flexbox 用于一维布局（只需行或列）。Grid 更适合页面布局；Flexbox 更适合组件布局。
▶CSS Grid 中的 fr 单位是什么？
fr（分数）是分配剩余空间的弹性单位。grid-template-columns: 1fr 2fr 让第二列获得第一列两倍的空间。类似于 Flexbox 中的 flex-grow。
▶Grid 项目可以跨越多个单元格吗？
可以。使用 grid-column: span 2 或 grid-row: span 2 让项目跨多列或多行。也可以使用命名的网格区域创建复杂布局。