CSS Grid 生成器 - 可视化网格布局工具

1. 搭一个网格

导出的是容器级声明。子项跨列跨行（grid-column / grid-row）与具名区域（grid-template-areas）需要在生成代码上继续手工补——本页聚焦「模板 + 间距 + 对齐」的可视化校准，避免一上来就在空白编辑器里盲写。

1. 选择等分模式：按列数/行数生成 repeat(n, 1fr)；或切到自定义模板，输入如 1fr 2fr 1fr、auto 1fr auto、minmax(12rem, 1fr) 等表达式。
2. 调节列间距与行间距（像素），增减预览占位块，观察轨道如何分配剩余空间。
3. 设置 justify-items、align-items、justify-content、align-content，复制生成的 .grid-container 规则到样式表。

2. 何时用网格而不是弹性布局

经验法则：只关心一条轴的分配与换行 → 弹性布局；必须同时描述行与列 → 网格。两者可以嵌套：外层网格定版面，内层弹性布局排工具条。

• 整页壳层：页眉、侧栏、主区、页脚要同时锁定行列关系。
• 图片或卡片画廊需要二维对齐到同一基线，而不是只沿主轴排布。
• 表单两列标签与控件要对齐成网格；一维工具条、标签行、底栏按钮组仍更适合弹性布局。

3. fr、minmax 与响应式轨道

等分模式下的 1fr 会平分容器里减掉固定轨道与间距后的剩余空间。自定义模板可写 minmax(最小, 1fr) 或 repeat(auto-fit, minmax(240px, 1fr)) 一类表达式，让轨道在窄屏上自动折行。注意：生成器预览视口不等于你的真实断点——把媒体查询写进项目，用真实长标题、多语言文案与侧栏折叠状态回归，不要假设桌面比例永远成立。

4. 对齐属性容易混淆的地方

若只想让某一个卡片顶对齐而其他拉伸，应在项目里给该子项写 align-self，而不是改容器 align-items 连坐全部格子。

• items 控制每个格子里的子项如何对齐；content 控制整组轨道在容器「多余空间」里如何分布。
• 子项默认拉伸铺满格子；图标列或徽章列可改为 center，避免被拉变形。
• 预览里的短色块不会暴露长文案撑破——复制后务必用真实内容再测一遍换行与溢出。

5. 和相邻工具的分工

网格只解决排布。复制 CSS 后仍要在亮色/暗色主题下核对对比度与焦点环；颜色与可读性请用对比度检查等工具，而不是指望布局生成器代劳。

• 弹性布局生成器：一维工具条、换行标签、底栏。
• 渐变生成器：区块背景与氛围层。
• 像素 rem 换算：把间距数值落到设计 token。

6. 常见踩坑与定稿习惯

轨道数少于子项时，多余子项会自动排到隐式行——这是规范行为，不是预览 bug。自定义模板字符串语法错误会导致预览空白：先用等分模式确认结构，再切自定义细调。本页会话状态会本地记住，但不要把它当成版本库真相；定稿的模板、间距与断点必须提交进代码，并在真实路由页面上再验一次。