Grid System 是框架提供的预设列数、断点和间距的类名集合，非 CSS Grid 封装；它通过编译好的 CSS 规则实现布局，不依赖 JS 或运行时计算。

Grid System 是什么，不是什么

它不是 CSS 原生 display: grid 的封装层，而是框架（如 Bootstrap、Tailwind、Foundation）提供的预设列数、断点和间距规则的类名集合。你写 col-6 或 grid-cols-12 时，背后是框架提前编译好的 CSS 规则，不依赖运行时 JS，也不动态计算布局。

如何用好 class-based Grid，避免“套用即完事”

直接套 container + row + col 很快，但容易在响应式切换、嵌套、对齐上翻车。关键在理解三类类名的实际作用：

• container：仅控制最大宽度和水平居中，不处理内部子元素排列
• row：本质是 display: flex 或 display: grid 容器，负责清除子项浮动/设置 gap，但本身不定义列宽
• col-* ：真正分配空间的单元，比如 col-md-8 表示「中屏及以上占 8/12 列」，数值必须加起来为 12（Bootstrap 默认）或匹配框架总列数

常见错误：row 内混用不同断点的 col（如 col-sm-12 col-lg-6），导致小屏正常、大屏错位——因为框架按断点顺序覆盖，col-lg-6 会覆盖 col-sm-12 在 lg+ 下的行为，但没声明 col-md，中屏就回退到默认（可能是 full-width 或未定义）。

Tailwind 的 grid-cols- 和 Bootstrap 的 col- 用法差异

两者底层逻辑不同：Tailwind 的 grid-cols-* 直接映射到 CSS Grid 的 grid-template-columns，而 Bootstrap 的 col- 是基于 Flexbox 的百分比宽度模拟栅格。这意味着：

• Tailwind 中 grid-cols-3 生成的是等宽三列，不能直接指定某列占两份；需改用 grid-cols-[1fr_2fr_1fr] 或配合 col-span-2
• Bootstrap 中 col-4 + col-8 自动填满一行，但无法让一列跨多行（Grid 可用 row-span-2）
• 嵌套时，Tailwind 需显式加 grid 类启用网格上下文；Bootstrap 的 row 内再套 row 会触发新的 flex 容器，但可能丢失外层 gutter

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)));
  gap: 1rem;
}
.grid-item:nth-child(2) {
  grid-column: span 2;
}

为什么有时写了 col-6 却没效果

最常被忽略的是父容器缺失 row 或未清除浮动（尤其旧版 Bootstrap）。现代框架大多已弃用 float，但仍需检查：

• 是否漏了 row 包裹？col- 类只在 row 下生效（Bootstrap 5+ 要求 row 必须是直接父级）
• 是否在非响应式环境用了响应式类？例如开发时禁用了媒体查询，col-md-6 就不会生效，得补一个 col-6 作 fallback
• 是否与自定义 CSS 冲突？比如全局设置了 * { box-sizing: border-box; } 没问题，但若某处写了 box-sizing: content-box，又加了 padding，就会撑破列宽

调试建议：打开浏览器开发者工具，直接看该元素 computed 样式里 flex-basis 或 width 是否为预期值，而不是只盯 class 名是否存在。