不能给.row加display: grid，因其依赖的负外边距、flex-basis计算和断点媒体查询在grid下全部失效；正确做法是绕开.row/.col，用语义容器+grid-column: span n+minmax(0,1fr)+gap重构。
直接用 display: grid 替代 Bootstrap 的 .row/.col 结构是可行的，但不能简单把 .row 的 display 改成 grid——那样会立刻崩掉列宽、间隙和断点逻辑。
为什么不能给 .row 加 display: grid？
Bootstrap 的 .row 依赖负外边距（margin-left: -15px）对齐 .col，而 .col 宽度靠 flex-basis 和 flex-grow 计算；Grid 下这些值完全不生效。结果就是：
-
.col-md-6在 Grid 容器里不再占一半宽度，可能缩成一条细线 -
g-3类定义的间隙失效，因为gap不继承负 margin 行为 - 断点类（如
col-lg-4）在媒体查询中被忽略，响应式彻底失灵
怎么写一个真正可用的 Grid 栅格替代方案？
核心是绕开 .row/.col，用语义容器 + 自定义类控制跨列行为。关键参数不是“模仿 Bootstrap”，而是适配真实需求：
- 容器设
display: grid+grid-template-columns: repeat(12, minmax(0, 1fr))——minmax(0, 1fr)比纯1fr更稳，防内容撑破列 - 子项用
grid-column: span N，例如span 4等价于 Bootstrap 的col-4 - 留白统一用
gap，别混用margin，否则span计算会偏移 - 响应式直接套
@media，改grid-column值，比如@media (min-width: 768px) { .col-md-6 { grid-column: span 6; } }
哪些场景必须保留 Bootstrap 栅格？
不是所有地方都适合一刀切换 Grid。实际项目里容易踩坑的边界很明确：
- 表单控件、按钮、模态框这类组件级元素，继续用 Bootstrap 的
.form-control、.btn—— 它们的样式链和 JS 行为深度耦合，硬套 Grid 会触发重绘异常或事件丢失 - 老浏览器兼容要求（如 IE11）必须降级：用
@supports (display: grid)包裹 Grid 规则，fallback 到 float 或 Flex 布局 - 已有大量
.col-md-6类的存量页面，强行重写 HTML 结构成本远高于收益，优先局部重构主视觉区块（如首页卡片流、仪表盘）
真正难的不是语法替换，而是判断哪块 DOM 该交由 Grid 控制、哪块该留给框架兜底——结构越靠近页面骨架，Grid 越值得投入；越靠近交互组件，Bootstrap 的封装价值反而更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
