非等宽列轨道应直接用grid-template-columns定义比例，如40% 60%或1fr 2.4fr 0.8fr 3fr；避免仅设grid-column: 1 / -1、滥用minmax()、grid-auto-flow: dense及混用grid-area与grid-column，响应式需媒体查询重置列数与定位。
用 grid-template-columns 定义非等宽列轨道是核心
不对称不是靠 margin 或 transform 挤出来的，而是从网格轨道源头定义比例差异。比如左侧图文区占 40%，右侧视觉延展区占 60%，直接写 grid-template-columns: 40% 60%；若需留白呼吸感，改用 grid-template-columns: 1fr 2.4fr 0.8fr 3fr 这类显式分数比，比 span 更可控、不易被自动算法干扰。
常见错误现象：只设 grid-column: 1 / -1 期望“撑满”，结果在窄屏下内容溢出或错位——因为没约束列轨道本身，Grid 会按默认 auto 行为回退。
- 避免用
minmax()包裹单列（如minmax(300px, 1fr)），它在小屏下可能强制最小宽度导致横向滚动 - 移动端需配合媒体查询重置列数，例如从四列（
1fr 2.4fr 0.8fr 3fr）缩为两列（1fr 1fr） - 若右侧要突破容器限制（如抵至视口边缘），不要把整个 Hero 套进
.container，而应让 Grid 容器本身脱离常规布局流
grid-column 手动指定起止线比 grid-area 更可靠
当布局出现 L 形、斜跨、中间挖空等真实非对称需求时，grid-template-areas 会静默失效或整行塌陷。直接用 grid-column: 2 / 4 和 grid-row: 1 / 3 锚定每个区块坐标，逻辑清晰且浏览器兼容性好。
典型踩坑点：grid-area: "hero" 配合 grid-template-areas: "hero hero ." 看似合理，但第二行加个 . 后，该行高度可能塌为 0，后续所有区域整体下移。
- 区域名不能含数字开头或短横线，
"hero-banner"合法，"1-hero"会被忽略 - 跨行必须确保目标行存在对应轨道，否则行为不可预测；优先用数值坐标而非命名区域
- 若某区块需同时跨列+跨行，两个属性都要显式写，例如
grid-column: 2 / 4; grid-row: 1 / 3
响应式切换时别依赖 grid-auto-flow: dense
这个属性本意是“填空”，但在非对称布局中它会把小元素塞进你刻意留出的空白轨道，破坏原本设计的视觉节奏和留白密度。尤其在移动端列数减少后，dense 可能打乱内容阅读顺序。
正确做法是：用媒体查询重新定义 grid-template-columns 和每个子项的 grid-column，保持控制权在开发者手上。
- 禁用
grid-auto-flow: dense，除非你明确需要“自动填空”且已测试所有断点 - 移动端建议改为单列流式（
grid-template-columns: 1fr），再用grid-row控制上下顺序 - 避免在同一个容器里混用
grid-column和grid-area，容易因解析优先级冲突导致定位失败
与 Bootstrap 5 混用时必须隔离 Grid 容器
Bootstrap 5 的 .row 和 .col 是 Flexbox 实现，和 Grid 不兼容。直接在 .row 上加 display: grid 会导致 col 类的 flex-basis 和 max-width 干扰 Grid 子项自动定位。
最稳妥的做法是完全绕过 Bootstrap 栅格，新建一个独立容器，例如 <div class="hero-grid">，并在 CSS 中单独定义其 Grid 规则。<ul>
<li>不要给 Grid 容器加 <code>.container 或 .row 类，它们会引入不必要的 padding/margin 和 display 覆盖
--bs-gutter-x 替代硬编码 gap 值@media (max-width: 768px) 重写 grid-template-columns，而不是试图用 col-md-8 这类类名干预
实际项目中最容易被忽略的是：**左侧对齐基准线是否与页面其他常规内容一致**。这不取决于 Grid 列宽，而取决于容器外边距、父级 max-width 设置，以及是否用了 justify-content: start 对齐。一旦错位，整个“半受限”设计就失去可信度。
