多列布局的 CSS 正确 li 顺序答案

【问题标题】：CSS correct li order for multiple column layout多列布局的 CSS 正确 li 顺序
【发布时间】：2019-05-13 22:10:55
【问题描述】：

我有以下代码，正在尝试找出使 4 列成为必要的最佳方法。

<ul>
  <li class="first-column">row1 column1</li>
  <li class="first-column">row2 column1</li>
  <li class="first-column">row3 column1</li>
  <li class="second-column">row1 column2</li>
  <li class="second-column">row2 column2</li>
  <li class="third-column">row1 column3</li>
  <li class="forth-column">row1 column4</li>
</ul>

通常我会使用下面的 css 来解决这个问题，但这不会以正确的顺序维护 li（前 3 个 li 在第一列中）。

 .first-column, .second-column, .third-column, .forth-column {
   width:25%;
   float: left; 
 }

【问题讨论】：

你试过什么？你在哪里卡住了？出了什么问题，或者没有工作？
您好，感谢您抽出宝贵时间，我刚刚用我尝试过的方法编辑了问题。
你可以在这里找到类似的答案，因为这可能看起来像它的重复论坛：stackoverflow.com/questions/42613350/…
不幸的是，该帖子上的解决方案与问题中发布的 css 相似，因为它没有将 li 置于所需的正确顺序。

标签： css layout position html-lists multiple-columns

【解决方案1】：

听起来像是 CSS 网格作业：

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.first-column {
  grid-column: 1;
}

.second-column {
  grid-column: 2;
}

.third-column {
  grid-column: 3;
}

.forth-column {
  grid-column: 4;
}

<ul>
  <li class="first-column">row1 column1</li>
  <li class="first-column">row2 column1</li>
  <li class="first-column">row3 column1</li>
  <li class="second-column">row1 column2</li>
  <li class="second-column">row2 column2</li>
  <li class="third-column">row1 column3</li>
  <li class="forth-column">row1 column4</li>
</ul>

【讨论】：