列数固定的列流？答案

【问题标题】：Column flow with fixed number of columns?列数固定的列流？
【发布时间】：2021-05-11 08:07:55
【问题描述】：

我有一个简单的 CSS 网格 https://play.tailwindcss.com/EOm6TXGpGU

<ul class="grid gap-1 grid-cols-2 grid-flow-row">
  <li class="bg-gray-200">Item 1</li>
  <li class="bg-gray-200">Item 2</li>
  <li class="bg-gray-200">Item 3</li>
  <li class="bg-gray-200">Item 4</li>
  <li class="bg-gray-200">Item 5</li>
</ul>

这个例子给了我错误的结果：

Item 1 | Item 2
Item 3 | Item 4
Item 5

我怎样才能让它流列而不是行？

想要的结果是：

Item 1 | Item 4
Item 2 | Item 5
Item 3

通常，我需要固定数量的列和动态行数，均匀分布在列之间。使用 flexbox 的解决方案也可以。

【问题讨论】：

我不知道顺风，但有点提示。 .grid-flow-row 不是正确的选择，请尝试 .grid-flow-col(umn) 或它在顺风中的命名方式。只是一个基本的逻辑。
使用 .grid-flow-col 我需要指定行数...
这似乎是一个问题，多列布局比网格更好。
我在 laravel 刀片语言中有一个解决方案。这对你好吗？ @Molfar

标签： html css tailwind-css

【解决方案1】：

<ul style="column-count:2;">
      <li class="bg-gray-200">Item 1</li>
      <li class="bg-gray-200">Item 2</li>
      <li class="bg-gray-200">Item 3</li>
      <li class="bg-gray-200">Item 4</li>
      <li class="bg-gray-200">Item 5</li>
</ul>

我觉得跟顺风没有关系，大家可以看这篇文章深入挖掘https://css-tricks.com/almanac/properties/c/column-count/

【讨论】：