本文介绍如何仅用 css 实现每行列数动态变化的网格布局（如前两行3列、第三行5列、第四行4列），摒弃传统 `columns` 属性限制，转而利用 css grid 的 `grid-column` 与 `nth-child` 精确控制每个列表项的跨列宽度。
要实现「不同行拥有不同列数」的布局（例如：第1–2行各3列、第3行5列、第4行4列），不能依赖 columns 属性——它仅适用于文本流式分栏，无法按行粒度控制列数，且会破坏元素顺序与语义结构。
✅ 正确解法是使用 CSS Grid，通过以下核心策略达成目标：
✅ 方案一：基于最小公倍数（LCM）的精细跨列控制（推荐用于严格对齐）
原理：为兼容 3 / 5 / 4 列，取其最小公倍数 LCM(3,5,4) = 60，将整行划分为 60 个等宽轨道（repeat(60, 1fr)），再让每组元素按需 span 对应份数：
- 每 3 列 → 占 60 ÷ 3 = 20 份
- 每 5 列 → 占 60 ÷ 5 = 12 份
- 每 4 列 → 占 60 ÷ 4 = 15 份
对应 HTML 中 15 个
- 第1–6项（前两行 × 3列）→ span 20
- 第7–11项（第三行 × 5列）→ span 12
- 第12–15项（第四行 × 4列）→ span 15
ul {
display: grid;
grid-template-columns: repeat(60, 1fr);
gap: 0.5rem;
}
/* 前6项：每项占20份 → 每行3项，共2行 */
li:nth-child(-n+6) {
grid-column: span 20;
}
/* 第7–11项：每项占12份 → 一行5项 */
li:nth-child(n+7):nth-child(-n+11) {
grid-column: span 12;
}
/* 第12–15项：每项占15份 → 一行4项 */
li:nth-child(n+12) {
grid-column: span 15;
}
/* 基础重置 */
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
li a {
display: block;
padding: 0.75rem;
background: #f0f9ff;
border-radius: 4px;
text-align: center;
}⚠️ 注意：此方案要求明确知道每行项数与列数关系，适合静态数据；若列表长度动态变化，需配合 JS 或预设 CSS 变量增强可维护性。
✅ 方案二：语义化“换行锚点”法（更直观，适合视觉对齐）
若目标仅为视觉上实现“每行起始项左对齐”，可简化处理：固定列数为最大值（如 5fr），再用 grid-column: 1 强制指定每行首项回到第一列。
ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
}
/* 手动标记每行第一个 item 的位置（基于你的数据结构） */
li:nth-child(1), /* 行1起点 */
li:nth-child(4), /* 行2起点：1+3=4 */
li:nth-child(7), /* 行3起点：4+3=7 */
li:nth-child(12) { /* 行4起点：7+5=12 */
grid-column: 1;
}该写法无需复杂计算，清晰表达“换行意图”，且兼容性更好（支持所有现代浏览器），特别适合内容结构稳定、行首位置可预知的场景。
? 总结建议
- 优先选用 Grid 而非 columns：columns 是为文本分栏设计，不适用于可控的 UI 组件布局；
- LCM 方案精度高但维护成本略高，适合设计稿严格对齐、列数组合固定（如 3/4/5/6）的场景；
- 锚点方案简洁灵活，推荐作为默认实践，后续可通过 CSS 自定义属性（如 --row-starts: 1 4 7 12）进一步提升可配置性；
- 所有方案均保持 HTML 语义纯净，无障碍友好，无需修改 DOM 结构。
