grid-row管跨行，grid-column只管跨列；grid-row: 1 / 4表示从第1条行线到第4条行线（占3行），而grid-column: 1 / 4仅占3列且不影响行高。
grid-column 和 grid-row 到底谁管跨行？
很多人写 grid-column: 1 / 4 想让元素“从第一行拉到第四行”，结果它只占三列、高度还是默认内容撑开——因为 grid-column 只控制列轨道起止，完全不碰行。真正跨行的是 grid-row。
常见错误现象：元素没纵向延展、视觉上“被压扁”、明明写了跨度却没效果。本质是轴向混淆。
-
grid-column: 1 / 3= 从第 1 条列线开始，到第 3 条列线结束（占 2 列），和行数无关 -
grid-row: 1 / 4= 从第 1 条行线开始，到第 4 条行线结束（占 3 行） - 想让一个格子从第 2 行延伸到第 6 行？必须写
grid-row: 2 / 6，不是靠grid-column“凑数”
非对称 ≠ 随意写 span，显式轨道才是可控基础
用 repeat(auto-fit, minmax(300px, 1fr))) 这类自动模式，出来的永远是等宽卡片流，跟“艺术感”无关。非对称的本质是人为定义不均等的轨道比例与留白。
使用场景：杂志首页、产品故事页、带引述的长文排版——需要左窄右断续、中区突出、空白呼吸感。
- 优先用显式列定义：
grid-template-columns: 1fr 2.4fr 0.8fr 3fr，比span更稳定 - 留白别依赖
margin：用gap或插入空列轨道（如5vw宽的列）更可靠 - 禁用
grid-auto-flow: dense：它会把小元素塞进你刻意留出的空隙，破坏节奏
grid-template-areas 不适合真·非对称？那怎么破？
grid-template-areas 要求每行区域名对齐、不能跳格、不支持 L 形或斜跨，一写错就静默失效或整行塌陷。它适合语义清晰的矩形框架（如后台仪表盘），但不适合报纸式错落排版。
替代方案是放弃命名区域，直接为每个 item 手动指定坐标：
-
grid-row: 2 / 4; grid-column: 1 / 3;—— 占第 2–3 行、第 1–2 列 -
grid-row: 1 / -1;看似方便，但在 Safari（尤其 iOS 16 前）可能只渲染到显式定义的行数；稳妥做法是显式写够行数：grid-template-rows: repeat(12, minmax(100px, auto)) - 用命名线提升可读性：
grid-template-columns: [start] 1fr [mid] 2fr [end] 1fr;，再写grid-column: start / end
Bootstrap 里硬塞 Grid 会踩哪些坑？
Bootstrap 5 默认没有 display-grid 工具类，它的 col 类基于 Flexbox，和 Grid 混用会冲突——col-6 的 flex-basis 和 max-width 会干扰 Grid 子项定位。
正确姿势是隔离 Grid 容器，不复用 Bootstrap 栅格类：
- 独立容器：
<div class="my-grid">...</div>，不在里面套row或col - 跨屏适配别靠多套坐标：小屏下手动改几十个
grid-row值维护成本爆炸；建议分层处理——大屏用 Grid 坐标，小屏退化为 Flex 或单列流 - 别指望
g-3类自动生效：Grid 的gap必须显式声明，可复用 Bootstrap 变量：gap: var(--bs-gutter-x)
非对称布局最难的不是写对几行 CSS，而是判断哪一块该“破格”、哪一块该留白、以及要不要为某台旧 iPad 多写一行 fallback —— 这些没法自动化，得你亲手松开缰绳，再一点点收住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
