直接套用repeat(12, 1fr)会导致小屏下文字撑列、横向滚动、offset无效、嵌套错位；正确做法是repeat(12, minmax(0, 1fr))+grid-column: span n+媒体查询逐断点重置列定义与跨度。
直接用 grid-template-columns: repeat(12, 1fr) 写 12 列栅格，会在小屏下崩——文字撑开列宽导致横向滚动，offset 类无效，嵌套容器错位。真正可用的起点是 minmax(0, 1fr) + 显式 grid-column: span N + 媒体查询逐断点重置。
为什么 repeat(12, 1fr) 不能直接用
1fr 是“剩余空间等分”，不是“占 1/12 宽度”。它不感知 gutter、不防内容溢出、不响应断点变化。常见表现：
-
col-4在窄屏下实际宽度远小于 33.3%，甚至被压缩到 0，文字换行后撑破容器 -
col-sm-6类在媒体查询里只改了 class 名，但 Grid 容器没重设grid-template-columns，断点失效 - 嵌套的
.row子项仍按外层 12 列轨道计算，span 4实际占位错乱
正确声明基础网格容器
核心是把“等分”变成“可收缩的等分”：
.grid-row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
padding: 0 0.5rem;
}
-
minmax(0, 1fr)允许列收缩至 0，避免内容强制拉宽整行 -
gap替代 Bootstrap 的负 margin + padding 模拟 gutter，更干净 - 外层容器需加
padding补偿gap导致的左右空白缺失 - 不要给
.grid-col设width，一律用grid-column: span N
如何实现 col-sm-6 col-md-4 这类响应式类名
Grid 没有内置断点逻辑，必须靠媒体查询同步重置三样东西：列数、列定义、子项跨度。
/* 移动端默认单列 */
.grid-row { grid-template-columns: 1fr; }
<p>@media (min-width: 576px) {
.grid-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-sm-6 { grid-column: span 6; }
}</p><p>@media (min-width: 768px) {
.grid-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-md-4 { grid-column: span 4; }
}</p>
- 每个断点都得重复写
repeat(12, minmax(0, 1fr))，不能只在外层定义一次然后指望子项自动适配 -
.col-sm-6和.col-md-4必须在对应媒体查询内声明，否则未命中时会继承上一断点的span值 - 如果同时存在
col-6（无前缀）和col-sm-6，前者需放在媒体查询外作为 fallback
嵌套行与偏移怎么处理
Bootstrap 的 offset-2 在 Grid 中对应 grid-column-start，但要注意起始线编号从 1 开始：
.col-offset-2 { grid-column-start: 3; } /* 跳过前两列，从第3条线开始 */
.col-8.offset-2 { grid-column: 3 / span 8; }
- 嵌套的
.grid-row必须单独设display: grid和自己的grid-template-columns，它不会继承父级轨道 - 若需子行对齐父行的 12 列轨道（比如卡片底部按钮统一高度），得用
subgrid，但目前 Safari 仅部分支持，生产环境慎用 - 所有
span值必须是整数，span 3.5无效；想实现 1/3 宽度就用span 4（≈33.3%）
最易忽略的一点：gutter 的单位必须统一。用 rem 或 px 都可以，但一旦在媒体查询里改了 gap 值，所有依赖该间距的布局（比如卡片内边距、文字行高补偿）都得同步调整，否则视觉节奏会断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
