本文介绍一种基于 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] 这样交替变化列宽的网格布局（即每行元素数量呈 3–2–3–2… 循环），单纯依赖 grid-template-columns: repeat(3, 1fr) 是不够的——它只能固定每行三列，无法动态控制单个元素跨列行为及分组语义。
核心思路是：固定总列数（如 6 列），再通过 grid-column: span N 显式指定每个元素占据的列数，并利用 CSS 选择器精准定位“子组”中的元素。
✅ 推荐方案：6 列基底 + 动态跨列 + 语义化选择器
.container {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 固定6列，作为布局网格基准 */
gap: 10px;
}
/* 默认：每项占2列 → 形成每行3个元素（6÷2=3）*/
.container > div {
grid-column: span 2;
background: #ff6b6b;
height: 50px;
border-radius: 4px;
}
/* 特殊项：第4、第5、第9、第10、第14、第15…个元素 → 占3列，构成2元素/行 */
/* 模式分析：每5个元素为一个周期，其中第4和第5个需展宽（即 :nth-child(5n+4) 和 :nth-child(5n)）*/
.container > div:is(:nth-child(5n + 4), :nth-child(5n)) {
grid-column: span 3;
background: #4ecdc4;
}对应 HTML（可无限追加 <div>）：
<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>11</div> <div>12</div> <!-- 更多元素将自动延续 3→2→3→2 模式 --> </div>
✅ 渲染效果：
立即学习“前端免费学习笔记（深入）”；
- 元素 1–3：各占 2 列 → 一行排满（3 × 2 = 6）
- 元素 4–5：各占 3 列 → 一行仅容 2 个（2 × 3 = 6）
- 元素 6–8：回归各占 2 列 → 一行 3 个
- 元素 9–10：再次各占 3 列 → 一行 2 个
以此类推，形成 3-2-3-2... 的无限循环结构。
? 如何精准控制“子组”内样式？
由于视觉上的子组（如 [4][5] 或 [9][10]）在 DOM 中仍是线性排列，不能直接用 :nth-of-type() 区分逻辑组，但可通过以下方式实现精细化控制：
按位置批量设置：如 .container > div:nth-child(5n+4) { color: white; font-weight: bold; }
-
结合伪元素或数据属性增强语义（推荐进阶用法）：
<div data-group="row2">4</div> <div data-group="row2">5</div>
[data-group="row2"] { background: #4ecdc4; } -
使用 CSS 自定义属性统一管理：
.container > div:nth-child(5n+4) { --group: "pair"; } .container > div:nth-child(5n) { --group: "pair"; } [style*="--group: pair"] { border: 2px dashed #4ecdc4; }
⚠️ 注意事项
- :is() 是现代浏览器（Chrome 100+, Firefox 100+, Safari 15.4+）支持的语法，若需兼容旧版，可拆分为独立选择器；
- grid-column: span 值必须 ≤ grid-template-columns 总列数（本例中最大为 span 3，因总列数为 6）；
- 避免混用 grid-row 显式定位，否则会破坏自动流式布局逻辑；
- 若需响应式适配（如小屏变单列），建议配合 @container 或媒体查询重置 grid-template-columns，而非修改 span 值。
该方案兼顾可扩展性（元素数量无上限）、可维护性（样式规则集中清晰）与可定制性（子组样式精准可控），是构建动态内容网格的理想实践。
