结论：在已有 Bootstrap 项目中，局部用 CSS Grid 替代 .row/.col 可绕过 Flexbox 行限制、避免嵌套污染、减少 DOM 深度，且响应式重排无需修改 HTML；无需弃用 Bootstrap，只需替换特定容器并添加 Grid 样式即可。
直接说结论：在已有 Bootstrap 项目的场景下，局部用 CSS Grid 替代 .row/.col 组合，能绕过 Flexbox 的行限制、避免嵌套污染、减少 DOM 深度，并且响应式重排无需改 HTML。这不是要你删掉 Bootstrap，而是用 Grid 解决它干得吃力的地方。
Grid 能绕开 .row 的 flex 行约束
Bootstrap 的 .row 默认是 display: flex，所有子项强制按行流式排列；想让某几个元素跨两行、错位堆叠或自定义轨道顺序，就得加额外 wrapper 或 JS 控制。
而 Grid 容器本身支持二维定位：grid-template-rows 和 grid-template-columns 可独立定义，grid-row/grid-column 能直接指定起止线。
常见错误现象：.col-6 在窄屏下被挤成单列，但你想让它始终占两格宽度——Flex 无法原生支持，Grid 一行 grid-template-columns: repeat(2, 1fr) 就搞定。
不破坏现有 Bootstrap 结构，只替换局部容器
你不需要动 .container 或全局样式，只需把某一块布局的父容器从 <div class="row"> 换成 <div class="my-grid-section">，再配 CSS：
.my-grid-section {<br> display: grid;<br> grid-template-columns: 1fr 2fr;<br> gap: 1rem;<br>}这样既保留了 Bootstrap 的 typography、spacing 工具类（如
mb-3、px-4），又避开 .row 的负 margin 和 .col 的 flex 基础逻辑。容易踩的坑：
• 别给
.row 强加 display: grid —— 它的负 margin 会和 Grid 的 gap 冲突，导致间距双倍或错位•
.col-* 类在 Grid 容器里仍可生效（v5+ 支持百分比宽度），但别指望它自动响应 grid-template-columns
响应式重排不用改 HTML 顺序
Bootstrap 下想实现“PC 端侧边栏在右、移动端移到顶部”，得靠 order- 类 + 大量媒体查询，且 HTML 结构必须预留位置；一旦设计变更，就得同步调整 class 和 DOM 顺序。
Grid 只需改 CSS：
@media (max-width: 768px) {<br> .my-grid-section {<br> grid-template-areas:<br> "header"<br> "sidebar"<br> "main";<br> }<br> .sidebar { grid-area: sidebar; }<br> .main { grid-area: main; }<br>}性能影响：
• Grid 规则由浏览器原生解析，无 JS 初始化成本
• 不增加额外 DOM 节点，可访问性语义更干净
• 低端 Android 上，Flex 的
:focus-visible 伪类可能触发重绘，Grid 无此问题
立即学习“前端免费学习笔记（深入）”；
minmax() + auto-fit 比 12 列栅格更适合移动端内容密度
Bootstrap 的 12 列系统在移动端常造成浪费：一个卡片宽度 160px，12 列意味着最大撑到 1920px 才满，而实际屏幕多在 360–414px。
Grid 可用：
.card-grid {<br> display: grid;<br> grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)));<br> gap: 0.75rem;<br>}说明：
•
140px 是移动端最小可触控区域，低于此易误点•
auto-fit 会压缩空列，auto-fill 则保留空轨道• 别写
repeat(12, 1fr) —— 浏览器要计算 12 条轨道，移动端渲染压力徒增兼容性注意：iOS Safari 14.5+、Chrome 87+、Firefox 77+ 均已支持，IE 全系不支持，但 Bootstrap 项目本身也早已放弃 IE
真正难的是判断哪块该换、哪块留着用 Bootstrap。比如表单控件、按钮组、导航栏这些有复杂交互逻辑的组件，继续用 .form-group 和 .btn-group 更稳；但卡片列表、仪表盘区块、图文混排区域，Grid 几行代码就能收口，还少一层 DOM。
