手写 CSS Grid 最稳，因生成器不支持响应式、老浏览器兼容差、冗余类名多；应掌握 grid-template-columns 三种写法及 gap、grid-auto-rows 等关键配置，用编辑器 snippet 替代网页生成器。
直接用 CSS Grid 写死结构最稳，别依赖“生成器”工具——它们多数只输出固定列数、不处理响应式、不兼容老浏览器，还容易塞一堆冗余类名。
为什么手写 grid-template-columns 比用生成器更可靠
市面上所谓“HTML网格生成器”，大多只是把 repeat(3, 1fr) 这类代码套进表单里点几下，但实际项目中你很快会遇到这些情况：
- 需要首行固定高度、其余行自适应，但生成器只给统一
grid-template-rows - 要让卡片最小 250px、最多占满一列，得靠
minmax(250px, 1fr)+auto-fit，而多数生成器根本不暴露这个参数 - 生成的 HTML 带一堆
col-1col-2类，结果你发现根本不需要手动定位，反而增加维护成本 - 导出的 CSS 缺少
gapfallback（比如只写gap，不加旧版grid-gap），在 Safari 15.6 以下直接失效
grid-template-columns 的三种常用写法及适用场景
真正决定网格形态的是这行代码，不是工具按钮。选哪种取决于内容弹性需求：
-
grid-template-columns: 200px 1fr 200px;—— 适合侧边栏固定宽、中间内容流式扩展的后台布局 -
grid-template-columns: repeat(4, minmax(280px, 1fr));—— 卡片列表，每项至少 280px，超出自动折行 -
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));—— 移动端优先，auto-fit会让空轨道收缩，auto-fill则保留空位
手动生成响应式网格的关键配置项
一个能上线的网格，光有 display: grid 不够，这几项必须显式控制：
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px;—— 推荐用gap，不用grid-gap（已废弃），但要注意 IE 完全不支持，需另配margin降级 -
grid-auto-rows: minmax(100px, auto);—— 防止内容撑高时行高失控，尤其配合grid-template-rows: none动态补行时 -
justify-items: stretch;—— 默认值，但显式声明可避免某些框架重置样式干扰 - 媒体查询中不要只改
grid-template-columns，同步调gap和grid-auto-rows，否则小屏下间隙过大或行高崩塌
真·生成器替代方案：用 VS Code 片段快速输出骨架
与其找网页工具，不如在编辑器里建个 snippet，输入 grid3 就展开为：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 16px;
}
再配个 grid-card 片段：
.card {
background: #fff;
border-radius: 6px;
padding: 16px;
}
这样生成的代码干净、可控、无外部依赖，改起来也快——毕竟你真正要调试的从来不是“怎么生成”，而是“怎么对齐”“怎么换行”“怎么撑满容器”。
最后提醒一句：fr 单位计算的是**剩余空间**，不是父容器总宽。如果父容器没设 width 或被 float / position: absolute 干扰，1fr 会变成 0，整个网格就消失了。这点最容易被忽略。
