使用网格CSS的3列网格(从上到下)

Question

好的,这就是情况,假设我有一个包含未知数量项目的列表,它可能是10或100,我希望将它们排列在3列中从上到下而不是从左到右.

现在我可以实现这一点columns: 3;,column-gap: 10px;而且一切都很好.

我的问题是,如何在display: grid;不知道项目数量的情况下实现相同的结果？

我知道如果您有固定数量的项目,您可以通过CSS Grid实现此目的,但是可以使用动态项吗？当然不使用JS.

ul {
  list-style: none;
  columns: 3;
  column-gap: 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
</ul>

Answer 1

我不认为如果没有您想要显示的项目数量,这是可能的,对于您的情况,您可以这样做:

ul {
   display: grid;
   grid-auto-flow: column;
   grid-template-rows: repeat(8, 1fr);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
</ul>

但是行数必须先前定义.

Answer 2

我在这里使用了一些 JavaScript。其中“lst”是 UL 的 id。我使用 CSS 变量传递 UL 中元素的值，并最终根据要求计算所需的列。唯一的缺点是我们需要检查元素总数是奇数还是偶数。

<script>
 var list = document.getElementById("lst").childElementCount;
document.getElementById("lst").style.setProperty('--x',list/2);
</script>

<style>
    ul {
          list-style:none;
          display: grid;
          grid-auto-flow:column;
          grid-template-rows:repeat(var(--x),1fr);
         }
</style>