CSS Grid生成器帮助你快速创建二维网格布局。通过直观的控制面板设置列数、行数、间距，自定义每列每行的尺寸（支持fr、px、%等单位）。实时预览布局效果，自动生成对应的CSS和HTML代码，复制即可使用。
Grid布局核心概念
CSS Grid是强大的二维布局系统。grid-template-columns定义列结构，grid-template-rows定义行结构。fr单位表示剩余空间的份数（如1fr 2fr表示1:2分配），auto根据内容自适应，固定值如200px。gap统一设置行列间距。
常用尺寸单位对比
- fr（fraction）：按比例分配剩余空间，如3列等宽用1fr 1fr 1fr
- auto：根据内容自动调整，常用于导航项
- px/em/rem：固定尺寸，适合侧边栏、固定宽度元素
- minmax(min, max)：设置尺寸范围，响应式布局常用
响应式Grid布局技巧
使用repeat(auto-fit, minmax(250px, 1fr))可创建自适应列数的网格：容器宽度够时多列显示，窄屏时自动减少列数。配合gap和媒体查询，轻松实现响应式卡片布局。
FAQ
Q: Grid和Flexbox应该用哪个？
A: Grid适合二维布局（同时控制行和列），如整体页面结构、卡片网格、复杂表单。Flexbox适合一维布局（单行或单列），如导航菜单、按钮组。两者可组合使用。
Q: 什么是隐式网格和显式网格？
A: 显式网格是通过grid-template-columns/rows定义的。当内容超出定义范围时，Grid会自动创建隐式轨道。可用grid-auto-rows/columns控制隐式轨道尺寸。
Q: 如何让某个元素跨越多行或多列？
A: 使用grid-column: span 2（跨2列）或grid-row: 1 / 3（从第1行到第3行）。也可以用grid-area指定起止位置：grid-area: 1 / 1 / 3 / 4（行起/列起/行止/列止）。