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 名是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
