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

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>

但行数必须预先定义。