CSS Grid 的 span 关键字仅接受整数，无法直接使用小数（如 span 2.5）；但可通过增加行/列轨道数量、配合整数跨距来等效实现更精细的布局控制。
css grid 的 `span` 关键字仅接受整数，无法直接使用小数（如 `span 2.5`）；但可通过增加行/列轨道数量、配合整数跨距来等效实现更精细的布局控制。
在 CSS Grid 中，grid-row 和 grid-column 的 span 值必须为正整数——这是 CSS 规范明确限定的行为（见 CSS Grid Level 1 § 7.2）。因此，尝试写 span 2.5 会被浏览器忽略或解析为无效值，导致布局失效。
要实现类似「半个单元格」的视觉效果（例如让一个元素跨越 2.5 行高），正确思路是：细化网格轨道粒度，再用整数 span 精确组合。例如，将原 3 行 × 100px 改为 6 行 × 50px —— 此时 span 2 即等价于原设计中的 span 1（100px），而 span 2 在新网格中恰好覆盖 100px，span 3 则覆盖 150px，从而支持更灵活的尺寸映射。
以下是可直接运行的优化方案：
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(3, 3, 41);
height: 100vh;
}
.wrapper {
background-color: #ff6b6b; /* 更清晰的红色 */
width: 90vmin;
height: 90vmin;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 1fr); /* 6 等分，替代固定像素，响应性更强 */
gap: 4px;
padding: 4px;
}
.wrapper > div {
background-color: #a0d18f;
border: 2px solid #2e7d32;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #1b5e20;
}
.box1 { grid-column: 1; grid-row: 2 / span 2; } /* 左中：占第2–3行 */
.box2 { grid-column: 2; grid-row: 1 / span 2; } /* 中上：占第1–2行 */
.box3 { grid-column: 2; grid-row: 4 / span 2; } /* 中下：占第4–5行 */
.box4 { grid-column: 3; grid-row: 2 / span 2; } /* 右中：占第2–3行 */
<div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div>
✅ 关键技巧总结：
- 使用 repeat(6, 1fr) 替代 repeat(3, 100px)，提升响应性与可维护性；
- gap 和 padding 避免边框重叠，增强视觉分离；
- 所有 span 值保持为整数（2），但因轨道更细，实际占据空间更精准；
- 若需更高精度（如 1/4 单元格），可设 repeat(12, 1fr) 并 span 3。
⚠️ 注意：切勿依赖 span 小数语法——它在任何现代浏览器中均不生效。始终通过「增加轨道数 + 整数跨距」这一标准模式达成亚单元格布局目标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
