CSS / Grid

Grid 生成器

可视化调节行列、间距与对齐,实时预览并复制 CSS Grid 代码。

预设
preview
轨道
列轨道
行轨道
对齐
justify-items
align-items
CSS

CSS Grid 怎么快速搭布局?

CSS Grid 用行列轨道描述二维布局,适合卡片墙、侧边栏、圣杯结构等场景。grid-template-columns / rows 可用 fr、px、auto、minmax 与 repeat() 组合;gap 控制轨道间距,justify-items 与 align-items 控制单元格内对齐。本工具可视化调节列数、行数、间距与轨道模式,实时预览并一键复制生成的 Grid CSS。