CSS Grid 生成器
可视化构建 CSS Grid 布局。
How to Use
- 定义网格结构：设置列数和行数，然后使用灵活单位（fr、px、%、auto、minmax）调整其大小。通过拖拽分隔线或输入框可视化添加和删除轨道。
- 配置网格间距：设置 column-gap 和 row-gap（或简写 gap），调整 justify-items 和 align-items 进行单元格级别的对齐，设置 justify-content 和 align-content 控制网格整体在容器中的位置。
- 复制生成的 CSS——获得完整的 CSS grid 规则。如果配置了命名网格区域或指定了各元素的 grid-column / grid-row 跨度，还可选择复制子元素的位置规则。
Frequently Asked Questions
- fr 单位是什么，什么时候使用？
- fr（fraction，分数）单位按比例分配可用空间。例如 grid-template-columns: 1fr 2fr 1fr 创建三列，中间列是两侧列的两倍宽。与百分比不同，fr 单位自动计算间隙，不会导致溢出，是响应式网格布局的推荐单位。
- CSS Grid 和 Flexbox 有什么区别？
- CSS Grid 是二维布局系统（同时处理行和列）。Flexbox 是一维布局（处理行或列）。使用 Grid 实现页面布局、卡片网格和复杂排列；使用 Flexbox 实现导航栏、内容居中和单轴分布。两者配合使用效果极佳——Grid 负责宏观布局，Flexbox 负责微观组件。
- 可以创建在移动端也能正常工作的响应式网格吗？
- 可以——使用 repeat(auto-fit, minmax(250px, 1fr)) 即可创建根据可用宽度自动调整列数的网格，无需媒体查询。窄屏上项目会自动换行减少列数。生成器的 Auto-fit 预设演示了这一模式。