bootstrap 5 默认不支持 display-grid 工具类，其栅格基于 flexbox；需手动添加 display: grid 并用 grid-template-columns 实现非对称布局，避免与 col 类混用，推荐独立容器+css变量+响应式媒体查询。
Bootstrap 5 默认不提供 display-grid 工具类
直接写 class="display-grid" 不会生效——Bootstrap 5 的实用工具类（Utilities）里压根没定义这个类。它的栅格系统基于 Flexbox，container、row、col 都是 flex 布局，不是 CSS Grid。想用 Grid，得自己加 CSS，或借助 Bootstrap 提供的自定义 CSS 变量和工具类扩展机制。
手动添加 display: grid 并配合 grid-template-columns
最直接的方式是在 HTML 元素上内联或在自定义样式中声明 display: grid，再用 grid-template-columns 控制列宽比例。非对称布局的关键在于打破等分，比如 2fr / 5fr / 1fr 或具体像素 + auto 混合。
- 避免用
col-*类和display: grid混用——col类带的flex-basis和max-width会干扰 Grid 子项的自动定位 - 推荐把 Grid 容器设为独立区块，例如：
<div class="my-grid"> <div>主内容</div> <div>侧边栏</div> </div>
- 对应 CSS 示例：
.my-grid { display: grid; grid-template-columns: 3fr 1fr; /* 非对称：主区占 3 份，侧边栏占 1 份 */ gap: 1.5rem; }
利用 Bootstrap 的 CSS 变量简化响应式 Grid 定义
Bootstrap 5 内置了 --bs-gutter-x、--bs-breakpoint-* 等变量，可直接在自定义 Grid 规则中引用，避免硬编码数值。
- 例如在小屏下改为单列，大屏下切两列非对称：
.responsive-grid { display: grid; grid-template-columns: 1fr; } @media (min-width: 992px) { .responsive-grid { grid-template-columns: 4fr 1fr; gap: var(--bs-gutter-x); } } - 注意：Bootstrap 的
gutter变量默认只用于row，Grid 中需显式引用，不能指望g-3类自动生效 - 若要复用断点逻辑，优先用
@include media-breakpoint-up(lg)（Sass 环境下），而非手写媒体查询
Grid 子项跨列/跨行时，别依赖 Bootstrap 的 offset- 或 order- 类
Flexbox 的 offset-* 是通过 margin-left 实现的，而 Grid 的跨列必须用 grid-column；order 在 Grid 中也无效，应改用 grid-row / grid-column 显式定位。
- 错误写法：
class="col-6 offset-2 order-3"—— 对display: grid子项完全无作用 - 正确写法（子项上）：
style="grid-column: 2 / 4;"表示从第 2 线跨到第 4 线（占两列） - 如果需要“跳过空白区域”，直接用
grid-column-start+grid-column-end，比模拟 offset 更可靠
非对称 Grid 布局真正难的不是写几行 CSS，而是决定哪些容器该用 Grid、哪些仍用 Bootstrap Flex 栅格——混用时样式冲突往往发生在看不见的 min-width、flex-shrink 或隐式 grid-auto-flow 上。动手前先用浏览器开发者工具检查 computed styles，比反复试错快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
