如何使用 CSS 获得列表的以下列模式？答案

【问题标题】：How can get following column pattern of a list with CSS?如何使用 CSS 获得列表的以下列模式？
【发布时间】：2018-03-26 21:42:17
【问题描述】：

我需要按以下模式将我的列表排列在列中

列：4

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>



 ---------------------
    1  3  4  5
    2
    ---------------------
    1  3  5  6
    2  4
    -----------------------
    1  4  7  9
    2  5  8  10
    3  6  
   -----------------------
    1  5  9  13
    2  6  10 14
    3  7  11 15
    4  8  12

谁能提供一个快速的解决方案？

【问题讨论】：

CSS 列将是您的解决方案。
不要那么肯定特里
@JohnWink 您最多可以拥有多少个<li> 元素？未知？就目前而言，除非最大值为 8，否则您当前的布局没有意义，但您的代码和示例并未描述最大值。换句话说，目前尚不清楚您希望它如何扩展到 8 以上。
@TylerH：感谢您对我的问题表现出兴趣。我知道我的要求有点奇怪，但我需要这个来满足我的一项要求。没有最大限制。我需要以某种方式避免布局更改。我可以用一些javascript来做到这一点。如果我在 CSS 中找不到解决方案。感谢大家的宝贵时间和努力。
@JohnWink 好的，谢谢。因此，如果您有 9 个<li> 元素，您希望它们如何出现？本质上，您对<li> 元素进行排序的方式没有意义（在第一列填充两行，然后在第三、第四和第五列填充一行）。通常，当您有列号要求时，您首先从左到右填充 <li> 元素。这样，代码可以以编程方式处理无限数量，例如“填充四列，然后转到新行。冲洗并重复”。但是您似乎想要“为两行填充一列，然后为其余三列填充一行”。

标签： javascript css multiple-columns

【解决方案1】：

CSS-Grid...但在我看来，它不是可扩展的或动态的。

ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 50%;
  margin: 1em auto;
  border: 1px solid grey;
}

ul:nth-of-type(1) li:nth-child(2) {
  grid-row: 2;
}

ul:nth-of-type(2) li:nth-child(2),
ul:nth-of-type(2) li:nth-child(4) {
  grid-row: 2;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

【讨论】：

感谢@Paulie_D 的宝贵时间和努力。但它无法满足我的目的。
查看 OP @Paulie_D 下的 cmets，我不太了解，但也许对你有意义？

【解决方案2】：

如果您利用 order 属性，您可以使用 Flexbox 来做到这一点：

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  flex: 0 1 25%;
}

li:nth-child(2) {
  order: 1; /* second last */
}

li:nth-child(4) {
  order: 2; /* last */
}

/* initial value of the order property is set to 0 */

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

【讨论】：

你试过你的列技术了吗？
我不是提问者 ;)
哈哈，是的，按照我的想法删除你的 col count 答案
检查他的模式
我在找。如果他想要顶部的，他可以删除 1 li。第二个例子是准确的