Question

我正在尝试创建一个有序的多列列表，但我正在努力使用CSS网格布局规则。

期望的结果应该是敏感的。在小屏幕2个网格列上，在大屏幕上最多4个，同时保持列顺序。

而不是像这样订购：

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15

他们应该这样订购：

我觉得我和this fiddle很接近。

＆＃13;

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: grey;
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33.333%, 50%));
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1em);
}

li {
  outline: 1px solid orange;
}

＆＃13;

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>

＆＃13;

特别是，我正在努力解决这些问题：

a）grid-auto-flow: column是使列包装工作所必需的，但也迫使我添加grid-template-rows: repeat(5, 1em)来指定行计数，这会破坏响应性。有没有办法根据内容和列数自动计算行数？

b）为什么列宽不均匀分布，为什么它们不适应屏幕尺寸？这不是minmax的用途吗？

Answer 1

让我们来看看你的两个难点。

grid-auto-flow: column需要使列包装工作，但也强制我添加grid-template-rows: repeat(5, 1em)以指定行计数，这会破坏响应性。有没有办法根据内容和列数自动计算行数？

grid-auto-flow: column 不使列包装工作。事实上，它恰恰相反。该规则创建新列以容纳其他网格项。

以下是它的工作原理（来自规范）：

7.7. Automatic Placement: the grid-auto-flow property

未明确放置的网格项会自动放入   通过自动放置在网格容器中的未占用空间   算法。

grid-auto-flow控制自动放置算法的工作方式，   准确指定自动放置的项目如何流入网格。

<强> column

自动放置算法通过填写每列来放置项目   转，根据需要添加新列。

<强> row

自动放置算法通过依次填充每一行来放置项目，并根据需要添加新行。如果未提供row和column，则会假定为row。

关于你的问题：

有没有办法根据内容和列数自动计算行数？

仅凭CSS Grid，我不相信。正如规范中所述，grid-auto-flow旨在按指定方向添加新曲目（column / row）。

如果可以使用Grid完成，那么它将不是完全自动的。你需要至少一些定义的位置，我猜，媒体查询。

最后，关于列包装，它来自auto-fit和auto-fill属性中的grid-template-columns或grid-template-rows值。

为什么列宽不均匀分布，为什么它们不适应屏幕尺寸？这不是minmax的用途吗？

这可以追溯到上面突出显示的规范部分。

这是您的列大小代码：

grid-template-columns: repeat(auto-fill, minmax(33.333%, 50%));

这转换为：每个显式列的宽度必须至少为33.333％，最大为50％。

问题是第三列不是显式。它是隐式，因为它是在grid-auto-flow: column的指导下通过自动放置算法添加到网格中的。因此，此列不受grid-template-columns的约束，grid-auto-columns仅涉及explicit track sizing。

implicit track sizing的属性为grid-auto-rows和auto。它们的默认值为ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(33.333%, 50%)); grid-auto-flow: column; grid-template-rows: repeat(5, 1em); margin: 0; padding: 0; list-style: none; background-color: grey; } li { outline: 1px solid orange; }，这是您在布局中看到的内容：第三列是其内容的宽度。

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>

grid-auto-columns

设置ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(33.333%, 50%)); grid-auto-flow: column; grid-template-rows: repeat(5, 1em); grid-auto-columns: 33.333%; /* NEW */ margin: 0; padding: 0; list-style: none; background-color: grey; } li { outline: 1px solid orange; }的值后，第三列的大小可以正确。

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>

rescale

当然，上面的信息只是一个解释，而不是主要问题的解决方案，因为我不相信CSS Grid提供的信息。

Answer 2

调整列数以更改列数：）

＆＃13;

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  /*---*/
  column-count: 4;
  column-gap: 0;
  width: 100%;
}

li {
  background-color: grey;
  outline: 1px solid orange;
}

＆＃13;

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>

＆＃13;

具有列顺序的响应式多列列表

2 个答案: