网格布局实现非对称设计的核心是子元素主动跨越特定轨道，通过grid-column和grid-row精确控制起止线编号（从1开始），配合负值、span语法及grid-area简化定位，避免隐式轨道与gap干扰。
Grid 网格布局实现非对称设计，核心不是靠“等分列数”，而是让子元素主动跨越特定轨道——用 grid-column 和 grid-row 精确控制起止线，就能打破对称感，做出错落、大小不一、视觉重心偏移的布局。
明确网格线编号，避免跨错轨道
网格线从 1 开始编号：容器最左/最上是第 1 条线，向右/下依次递增。显式定义 grid-template-columns: 1fr 2fr 1fr 会产生 4 条竖线（1–4），grid-column: 2 / 4 表示占第 2、3 两列（不是“跨 4 列”）。负值可倒数：grid-column: -3 / -1 在三列布局中等价于 1 / 3。别被 span 的字面意思带偏——grid-column: span 2 是从当前自动放置位置向右占两轨道，起始点不可控；要锁定起点，必须写全，比如 grid-column: 2 / span 2。
用起止线组合制造错落节奏
非对称的关键在于每个区块的行列跨度各不相同。例如六宫格常见结构：
- 左上大图：占第 1–2 行、第 1–2 列 →
grid-row: 1 / 3; grid-column: 1 / 3; - 右上双联：两个元素并排在第 1 行，分别占第 3 列和第 4 列 →
grid-row: 1; grid-column: 3;和grid-row: 1; grid-column: 4; - 中下阶梯：一个占第 2 行第 3 列，另一个占第 3 行第 2–4 列 → 视觉上形成错位下沉感
用 grid-area 简化固定模块定位
对结构稳定的区域（如头图、主内容、侧边栏），直接用 grid-area 一行写清四条线，更清晰不易出错。例如：.hero { grid-area: 1 / 1 / 2 / 5; } 表示占第 1 行、全部 4 列（线 1→5 覆盖 4 个轨道）。配合 grid-template-areas 命名区域，还能把逻辑映射成语义化名字（如 "header" "main" "sidebar"），但注意：一旦用了命名区域，就不能混用线号写法，否则冲突。
警惕隐式轨道与 gap 的干扰
gap 不新增轨道，但会撑开网格线间距——线号不变，视觉上却像“变宽了”，容易误判元素实际占位。更隐蔽的是隐式行/列：当子项指定的 grid-row: 1 / 6 超出显式定义的行数时，浏览器会自动生成隐式轨道，高度可能失控。建议显式设置 grid-auto-rows: minmax(60px, auto) 加以约束。子网格（subgrid）不能解决跨轨问题，它只用于子容器继承父级轨道线，定位仍需靠 grid-column/grid-row。
