CSS Grid 生成器
可视化生成CSS Grid布局。定义行、列、间隙，带交互式网格构建器和最终布局代码实时预览。
CSS Grid Generator
Preview
CSS Code
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 12px;
}What is CSS Grid 生成器?
CSS Grid生成器是一款强大的可视化布局工具，通过交互式画布创建CSS Grid CSS声明，而不是手动组合复杂的grid-template-columns、grid-template-rows和grid-area语法。CSS Grid是现代Web设计的二维布局标准，支持同时的行和列，带有命名区域、自动轨道大小、响应式分数fr单位和前所未有的元素定位控制。然而语法极其密集且强大：grid-template-columns支持带auto-fit/auto-fill的repeat表示法、minmax函数、命名行和简写，同时跨越多个概念层。本生成器允许您通过在交互式画布上单击和拖动以可视方式构建网格，创建行和列，精确调整轨道大小（使用像素、百分比、em、rem、视口单位或分数fr单位），使用auto-fit/auto-fill minmax模式实现完全响应式网格，独立定义行间隙和列间隙，使用可视化区域编辑器创建命名网格模板区域，使用开始和结束行或跨度语法将子项分配给特定的网格单元格、行、列。实时预览显示带有彩色覆盖线的网格、轨道大小标签和编号网格线，以帮助您理解坐标系。预设布局包括经典的圣杯布局、杂志布局、带侧边栏的仪表板、照片砖石画廊、定价比较表和带相关内容侧边栏的文章。生成的CSS包括多个视口的响应式媒体查询（如果您配置了）。
When to Use CSS Grid 生成器
用于设计仪表板布局、圣杯页面结构、杂志网格、产品目录画廊、日历月视图、复杂仪表板、定价表，或任何二维页面布局。
How to Use CSS Grid 生成器
在画布上单击和拖动以添加行和列。设置轨道大小、间隙和响应式断点。定义命名区域或使用编号放置。从布局预设中选择，然后复制带媒体查询的完整Grid CSS。