grid-column 怎么跨行不是跨列？
很多人写 grid-column 时默认它只能横向占列，其实它完全不关心“行”，只管列轨道起止。真正跨行的是 grid-row。如果你发现元素没往下延展，八成是误用了 grid-column 去试图控制纵向跨度。
-
grid-column: 1 / 3= 从第1条列线开始，到第3条列线结束（占2列），和行数无关 - 想让一个格子从第1行延伸到第4行？得写
grid-row: 1 / 4 - Grid 布局里，“跨行”和“跨列”是两个独立轴向的控制，混用会直接失效
非对称网格必须关掉 auto-fit 和 auto-fill 吗？
不一定，但默认用 repeat(auto-fit, minmax(300px, 1fr))) 这类写法会强制等宽，毁掉非对称感。艺术感来自人为定义不均等的列宽、留白和跨度，不是靠自动分配。
- 用显式轨道定义更可控：
grid-template-columns: 1fr 2.4fr 0.8fr 3fr - 留白别依赖 margin：用
gap或空列轨道（比如加个5vw宽的列）更稳定 -
auto-fit在响应式卡片流里好用，但在精心编排的非对称布局中，它会覆盖你的手工设定
怎么让某个 grid item 看起来“破格”又不破坏整体节奏？
关键不是拉伸它，而是用 grid-column 和 grid-row 锚定它在非连续轨道之间——比如跳过中间一列，或从第2行直接跨到第5行，制造视觉张力。
- 示例：
grid-column: 2 / 4; grid-row: 1 / 6;—— 占第2~3列、第1~5行，形成竖长块 - 避免用
span关键字：它依赖隐式轨道计数，容易在不同屏幕下错位；明确写数字线更可靠 - 如果父容器设置了
grid-auto-flow: dense，小元素可能被塞进空隙，反而削弱“破格”意图，建议保持默认row
firefox 和 safari 对 grid-column 跨越隐式行的支持有坑吗？
有，而且很隐蔽：当你用 grid-row: 1 / -1 想让它撑满所有行时，Safari（尤其是 ios 16 之前）可能只渲染到显式定义的行数，后面空白。这不是 bug，是规范对隐式网格的解释差异。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：显式定义足够多的行轨道，比如
grid-template-rows: repeat(12, minmax(100px, auto))) - 不要依赖
-1表示“最后一行”，尤其当内容动态增减时 - 检查
grid-auto-rows是否设了固定值（如100px）——它会影响隐式行高度，但不会触发 Safari 的完整渲染
非对称的本质是克制的失控：每一条 grid-column 和 grid-row 的数值，都是你亲手松开了一点自动布局的缰绳。松多少，得看容器尺寸、内容长度、以及你愿不愿意为某台旧 ipad 多写一行 fallback。