css - 分裂如果分成两列使用纯 CSS 大于 5

Question

<li>如果子项的数量超过 5 个，例如在纯 CSS 中， 是否可以将列表拆分为 2 列？

在我的示例中，我希望发生以下情况：

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

如果<li>元素的数量超过 5，我希望它看起来像这样：

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

标签： csssass

Answer 1

如果你能够使用 CSS 网格，你可以使用grid-template和grid-auto-flow指令来做到这一点：

.list {
  display: grid;
  grid-template-rows: repeat(5, min-content);
  grid-auto-flow: column;
}

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">6</li>
  <li class="item">7</li>
</ul>