首个格子放大需显式定义网格轨道，仅display: grid不生成轨道；grid-column/row依赖grid-template-columns/rows创建的线号，否则无效；推荐用span语法合并单元格，响应式中应配合媒体查询控制。
首个格子放大效果不是靠“单独放大它”，而是靠**合并网格区域 + 显式定义轨道**实现；漏掉 grid-template-columns 或 grid-template-rows，grid-column 和 grid-row 会完全失效——所有子项堆在左上角第一格里，看着像没动。
为什么 grid-column: 1 / 3 没让第一个格子变宽
根本原因是容器没定义列线：只写 display: grid 不生成任何轨道，浏览器默认单列，1 / 3 这两个线号压根不存在。临时加 border: 1px solid red 到容器上，一眼就能看出有没有列被渲染出来。
- 必须同时设置
grid-template-columns（比如1fr 1fr 1fr）才能产生至少 4 条垂直线（编号 1–4），此时grid-column: 1 / 3才跨前两列 -
grid-template-rows同理：不写它，行方向只有隐式行，grid-row: 1 / 3可能错位或无效 - 别依赖
grid-auto-columns或grid-auto-rows——它们只对超出模板范围的隐式网格起作用，不能替代显式定义
用 grid-area 或 span 合并首个格子的两种写法
假设你有 3×3 网格，想让第一个格子横跨前两列、纵跨前两行（即变成 2×2 大格），推荐用 span 写法，更直观、不易算错线号：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(100px, auto));
}
.item:first-child {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
-
grid-column: 1 / span 2= 从第 1 条列线开始，向右跨 2 条轨道（即占前两列） -
grid-row: 1 / span 2= 从第 1 条行线开始，向下跨 2 行 - 若改用
grid-area: 1 / 1 / 3 / 3，需确认行线总数：3 行 → 4 条行线（编号 1–4），所以/ 3是对的；但一旦增删行，数字就得重算，不如span靠谱
响应式下首个格子放大容易崩的三个坑
在 repeat(auto-fit, minmax(300px, 1fr)) 这类动态列数布局中，强行给首个格子设 grid-column: 1 / -1 会导致它独占整行，破坏其余卡片的自动排列——这不是“放大”，是“霸占”。
- 小屏时列数为 1，
1 / -1没问题；大屏列数变多，它仍强行占满，其他项被挤到下一行 - 真正安全的做法：用媒体查询分层控制，例如
@media (min-width: 768px) { .item:first-child { grid-column: span 2; } } - 如果首个格子含图片，记得加
width: 100%; height: auto，否则固定宽高会撑破网格轨道
合并单元格的本质不是“视觉拉伸”，而是重新分配轨道占用权——所有后续项的位置都会被它腾出的空间影响，调试时务必检查 DOM 中其他子项是否被意外挤偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
