本文介绍一种基于 css grid 的灵活布局方案，通过 grid-column: span 与 :is() + :nth-child() 组合选择器，实现按预设模式（如 3-2-3-2…）自动分配元素宽度，并支持对每组元素独立样式控制。
本文介绍一种基于 css grid 的灵活布局方案，通过 grid-column: span 与 :is() + :nth-child() 组合选择器，实现按预设模式（如 3-2-3-2…）自动分配元素宽度，并支持对每组元素独立样式控制。
要实现类似 [1][2][3] → [4][5] → [6][7][8] → [9][10] 这样列数交替变化、且元素数量不受限的网格布局，单纯依赖 grid-template-columns: repeat(3, 1fr) 是不够的——它只能强制每行固定三列。真正的解法在于：放弃“按行定义模板”，转而为每个子元素显式指定跨列数（grid-column: span N），并利用 CSS 选择器精准定位逻辑分组。
核心思路是将容器设为 6 列等宽网格（repeat(6, 1fr)），再让不同位置的元素跨越不同列数：
- 大多数元素占 2 列（即每行可容纳 3 个）；
- 特定位置的元素（如每组起始/结束位）占 3 列（每行仅容 2 个），从而自然形成 3→2→3→2… 的视觉节奏。
以下是完整实现：
.container {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 基础 6 列轨道 */
gap: 10px;
}
.container > div {
grid-column: span 2; /* 默认占 2 列 → 每行 3 个 */
background: #ff6b6b;
height: 50px;
border-radius: 4px;
}
/* 精准匹配“双列组”的首尾元素：第 4、5、9、10、14、15…个元素 */
/* 规律：位置 ≡ 4 或 0 (mod 5) → 即 :nth-child(5n+4) 和 :nth-child(5n) */
.container > div:is(:nth-child(5n + 4), :nth-child(5n)) {
grid-column: span 3; /* 占 3 列 → 每行仅 2 个，形成分组边界 */
background: #4ecdc4;
}对应 HTML 结构（元素数量可无限追加）：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <!-- 更多 div... --> </div>
✅ 效果说明：
- 元素 1–3：各占 2 列 → 并排一行；
- 元素 4–5：各占 3 列 → 并排一行（因总宽=6列）；
- 元素 6–8：回归 2 列 × 3 → 新一行；
- 元素 9–10：再次 3 列 × 2 → 下一行；
依此类推，自动循环。
? 关键技巧解析：
- :is() 允许合并多个伪类，提升可读性与维护性；
- :nth-child(5n) 匹配第 5、10、15…个元素；5n+4 匹配第 4、9、14…个；二者合起来精准覆盖所有“双列组”的两个成员；
- 所有元素仍处于同一网格流中，无需 JavaScript 或额外包装容器，完全响应式。
⚠️ 注意事项：
- 此方案依赖元素顺序严格连续，若需插入/删除中间项，需同步调整选择器逻辑；
- 若分组规则变更（如 4→3→4→3），只需重新计算 :nth-child() 表达式并调整 span 值；
- 如需为不同分组添加差异化内样式（如文字颜色、padding），可直接在对应选择器中扩展，例如：
.container > div:is(:nth-child(5n + 4), :nth-child(5n)) span { color: white; font-weight: bold; }
该方法兼顾语义简洁性、CSS 原生能力与高度可扩展性，是构建动态分组网格的理想实践。
