CSS Grid 生成器

CSS Grid 布局是一个强大的二维布局系统，允许你同时在行和列中排列元素。与一次只处理一个方向的 Flexbox 不同，Grid 让你对两个轴拥有完全控制。关键属性包括 grid-template-columns 定义列轨道、grid-template-rows 定义行轨道、gap 控制间距、grid-area 在命名区域内定位项目。

使用列数滑块设置列数（1 到 12）。使用行数滑块设置行数（1 到 12）。调整间距滑块控制单元格之间的间距（0 到 32px）。预览区域显示带有编号单元格的实时网格。满意后，复制生成的 CSS 代码并粘贴到你的项目中。

grid-template-columns 和 grid-template-rows 定义轨道大小。repeat() 函数创建等宽轨道，例如 repeat(3, 1fr) 创建三个等宽列。fr 单位按比例分配可用空间。gap 设置行和列之间的间距。如果需要，可以为 row-gap 和 column-gap 设置不同的值。

圣杯布局：三列头部、带侧边栏的主内容区。仪表板卡片：repeat(auto-fill, minmax(250px, 1fr)) 创建响应式卡片网格。全宽首屏加下方内容：一列跨越所有行。杂志布局：使用 grid-column 和 grid-row 混合跨度实现不同单元格尺寸。

使用 auto-fill 或 auto-fit 配合 minmax() 创建无需媒体查询的自适应响应式网格。结合 clamp() 实现灵活尺寸。使用 minmax(200px, 1fr) 设置最小宽度，防止项目收缩过小。使用媒体查询在断点处更改列数。考虑使用容器查询实现组件级响应式。