CSS Grid 网格布局可视化生成器
二维网格布局可视化生成器：在本地浏览器中交互式调节 CSS Grid 行列模板、gap 间距、单元格对齐及子项跨行跨列，实时预览并一键导出标准 CSS 与 Tailwind 代码。
列数 (Columns):
{{ resolvedColumns }}
行数 (Rows):
{{ resolvedRows }}
网格间距 (Gap)
gap: {{ gap }}px
row-gap: {{ rowGap }}px
column-gap: {{ colGap }}px
单元格对齐属性
子元素数量: {{ itemsCount }}
跨列数 (Col Span): {{ currentSpan.col }}
跨行数 (Row Span): {{ currentSpan.row }}
{{ n }}
{{ getItemSpanLabel(n) }}
1. Standard CSS
2. Tailwind CSS (Container)
CSS Grid 是专门针对二维（行与列同时排布）的现代布局系统，非常适合页面整体骨架、卡片矩阵、仪表盘与画廊等场景。而 Flexbox 是一维布局系统，适合单行或单列内的局部组件对齐（如导航栏、工具条、按钮图标混排）。在现代前端开发中二者通常协同搭配：Grid 搭建外层二维骨架，Flexbox 负责单元格内部组件的微观弹性排版。