本文介绍如何仅用 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; }该写法无需复杂计算，清晰表达“换行意图”，且兼容性更好（支持所有现代浏览器），特别适合内容结构稳定、行首位置可预知的场景。
? 总结建议