如何仅通过CSS实现列表每行不同列数的自定义布局？

原有的columns: 3是按列流式布局，无法精准控制每行的元素数量，要实现前2行各3个、第3行5个、第4行4个的布局，推荐使用CSS Grid或Flexbox方案，仅需修改CSS即可实现：

方案一：CSS Grid（精准控制） #

利用Grid的行列定位能力，通过指定特定元素跳转到下一行首列，来控制每行的元素数量：

ul.list {
  display: grid;
  /* 最多设置5列，匹配第3行的5个元素需求 */
  grid-template-columns: repeat(5, 1fr);
  /* 可选：设置元素间距 */
  gap: 8px;
}

/* 第3个元素后换行，控制第一行3个元素 */
.list li:nth-child(3) {
  grid-column: 1;
}

/* 第6个元素后换行，控制第二行3个元素 */
.list li:nth-child(6) {
  grid-column: 1;
}

/* 第11个元素后换行，控制第三行5个元素 */
.list li:nth-child(11) {
  grid-column: 1;
}

原理：通过grid-column: 1强制指定元素位于下一行的第一列，后续元素会自动从该位置开始排列，以此分割出每行的元素数量。

方案二：Flexbox（灵活适配） #

利用Flex的换行特性和伪元素来实现：

ul.list {
  display: flex;
  flex-wrap: wrap;
  /* 可选：设置元素间距 */
  gap: 8px;
}

/* 在第3、6、11个元素后插入占满宽度的伪元素，强制换行 */
.list li:nth-child(3)::after,
.list li:nth-child(6)::after,
.list li:nth-child(11)::after {
  content: "";
  width: 100%;
}

/* 可选：为元素设置基础宽度，确保每行元素均匀分布 */
.list li {
  flex: 1;
  min-width: calc(20% - 8px); /* 第3行5个元素，每个占20%宽度（减去间距） */
}

原理：占满100%宽度的伪元素会触发Flex的换行机制，配合flex:1让元素自动填充每行空间，适配不同屏幕宽度。

注意：两种方案都无需修改HTML结构，仅通过CSS即可实现需求，相比columns属性，Grid和Flexbox更适合这种需要自定义每行元素数量的布局场景。

内容的提问来源于stack exchange，提问作者Benji