如何用CSS Grid实现首页Hero区左右不对称布局？

非等宽列轨道应直接用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 行为回退。

1. 避免用 minmax() 包裹单列（如 minmax(300px, 1fr)），它在小屏下可能强制最小宽度导致横向滚动
2. 移动端需配合媒体查询重置列数，例如从四列（1fr 2.4fr 0.8fr 3fr）缩为两列（1fr 1fr）
3. 若右侧要突破容器限制（如抵至视口边缘），不要把整个 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，后续所有区域整体下移。

1. 区域名不能含数字开头或短横线，"hero-banner" 合法，"1-hero" 会被忽略
2. 跨行必须确保目标行存在对应轨道，否则行为不可预测；优先用数值坐标而非命名区域
3. 若某区块需同时跨列+跨行，两个属性都要显式写，例如 grid-column: 2 / 4; grid-row: 1 / 3

响应式切换时别依赖 grid-auto-flow: dense

这个属性本意是“填空”，但在非对称布局中它会把小元素塞进你刻意留出的空白轨道，破坏原本设计的视觉节奏和留白密度。尤其在移动端列数减少后，dense 可能打乱内容阅读顺序。

正确做法是：用媒体查询重新定义 grid-template-columns 和每个子项的 grid-column，保持控制权在开发者手上。

1. 禁用 grid-auto-flow: dense，除非你明确需要“自动填空”且已测试所有断点
2. 移动端建议改为单列流式（grid-template-columns: 1fr），再用 grid-row 控制上下顺序
3. 避免在同一个容器里混用 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 规则。

1. 不要给 Grid 容器加 .container 或 .row 类，它们会引入不必要的 padding/margin 和 display 覆盖
2. 可复用 Bootstrap 的 CSS 变量，如 --bs-gutter-x 替代硬编码 gap 值
3. 若需响应式列宽变化，用 @media (max-width: 768px) 重写 grid-template-columns，而不是试图用 col-md-8 这类类名干预

实际项目中最容易被忽略的是：**左侧对齐基准线是否与页面其他常规内容一致**。这不取决于 Grid 列宽，而取决于容器外边距、父级 max-width 设置，以及是否用了 justify-content: start 对齐。一旦错位，整个“半受限”设计就失去可信度。