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

理论上，您可以使用基于:nth-*选择器的"Quantity queries"来实现CSS Grid，如下所示：

＆＃13;

ul {
  list-style: none;
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

/* by default, items go in first column */
li { grid-column: 1; }

/* if there are 1 to 3 items, the 2nd one goes to 2nd column and the 3rd one goes to 3rd column */
li:first-child:nth-last-child(n + 1):nth-last-child(-n + 3) ~ li:nth-child(n + 2):nth-child(-n + 2) { grid-column: 2; }
li:first-child:nth-last-child(n + 1):nth-last-child(-n + 3) ~ li:nth-child(n + 3) { grid-column: 3; }

/* ... */

/* if there are 19 to 21 items, items 8-14 to 2nd column and items 15+ to 3rd one */
li:first-child:nth-last-child(n + 19):nth-last-child(-n + 21) ~ li:nth-child(n + 8):nth-child(-n + 14) { grid-column: 2; }
li:first-child:nth-last-child(n + 19):nth-last-child(-n + 21) ~ li:nth-child(n + 15) { grid-column: 3; }

/* if there are 22 to 24 items, items 9-16 to 2nd column and items 17+ to 3rd one */
li:first-child:nth-last-child(n + 22):nth-last-child(-n + 24) ~ li:nth-child(n + 9):nth-child(-n + 16) { grid-column: 2; }
li:first-child:nth-last-child(n + 22):nth-last-child(-n + 24) ~ li:nth-child(n + 17) { grid-column: 3; }

/* if there are 25 to 27 items, items 10-18 to 2nd column and items 19+ to 3rd one */
li:first-child:nth-last-child(n + 25):nth-last-child(-n + 27) ~ li:nth-child(n + 10):nth-child(-n + 18) { grid-column: 2; }
li:first-child:nth-last-child(n + 25):nth-last-child(-n + 27) ~ li:nth-child(n + 19) { grid-column: 3; }

/* and so on */

＆＃13;

<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>

＆＃13;

然而，这种方法并不实用。在我看来，CSS多列布局是比CSS Grid更好的解决方案。

Answer 3

我有一个包含未知数量项目的列表，可能是10或100

如您所见，CSS Multi-Column Layout使用纯CSS生成所需的布局 - 无需事先知道容器中的项目数。

CSS网格不是这种情况 - 您必须事先知道网格中的项目数，以便计算必要的行数 - 这是一个非常有限的限制。

所以我建议您坚持使用多列布局进行布局。

假设上述限制没问题 - 那么您可以使用css创建布局，如下所示：

（注意：@Ander已经回答了这个问题，但是这里有什么值得的解释）

1）在网格容器上将grid-auto-flow属性更改为column - 这将垂直布置网格项而不是水平布局（默认值）。

2）一旦知道了项目数，就可以计算创建平衡网格所需的行数，如下所示：

#rows =  ceil( #items / #columns )

因此对于22个项目 - ＃rows = ceil（22/3）= 8

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

我们可以使用SASS略微改进此解决方案 - 以生成更通用的解决方案来计算行数。（SASS有一个ceil函数）

ul {
  list-style: none;
  padding: 0;
  display:grid;
  $num-items: 22;
  $num-cols: 3;
  $num-rows: ceil($num-items / $num-cols);
  grid-template-columns: repeat($num-cols, 1fr);
  grid-template-rows: repeat($num-rows, 1fr);
  grid-auto-flow: column;
  border: 5px solid gold;
}

Codepen Demo

FWIW：这是一种替代解决方案，它使用nth-child选择器而无需更改grid-auto-flow属性。不幸的是，它具有相同的限制，必须提前知道#items。

li:nth-child(-n + 24) {
  grid-column: 3;
}

li:nth-child(-n + 16) {
  grid-column: 2;
}

li:nth-child(-n + 8) {
  grid-column: 1;
}

SASS Codepen

Answer 4

我在这里使用了一点JavaScript。所以＆＃39; lst＆＃39;是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>

使用网格CSS的3列网格（从上到下）

4 个答案:

Codepen Demo

SASS Codepen