具有列顺序的响应式多列列表 [英] Responsive multi-column list with column order

问题描述

我试图创建一个有序的多列列表，但在CSS网格布局规则中苦苦挣扎。

I am trying to create an ordered multi-column list, but am struggling with CSS Grid layout rules.

所需的结果应该具有响应性。在小屏幕上有2个网格列，在最多4个大屏幕上，同时保持列顺序。

The desired outcome should be responsive. On small screens 2 grid columns, on larger screens up to 4, all while maintaining a column order.

而不是像这样被排序：

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

它们应按以下顺序订购：

They should be ordered like this:

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

我觉得我很喜欢这把小提琴。

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

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

尤其是，我在以下方面苦苦挣扎：

Especially, I am struggling with these points:

a） grid-auto-flow：列是必需的为了使列换行起作用，还迫使我添加 grid-template-rows：repeat（5，1em）来指定行数，这会破坏响应能力。有没有一种方法可以根据内容和列数自动计算行数？

a) grid-auto-flow: column is required to make the column wrapping work, but also forces me to add grid-template-rows: repeat(5, 1em) to specify a row count, which breaks the responsiveness. Is there a way to calculate the row count automatically based on content and column count?

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

b) Why are the columns widths not evenly distributed and why don't they adapt to the screen size? Isn't this what minmax is for?

推荐答案

让我们来看一下您的两个关键点。

Let's go through your two sticking points.

grid-auto-flow：列是使列换行工作所必需的，而且还迫使我添加 grid-template-rows：repeat（5，1em）来指定一个行计数，这会破坏响应能力。有没有一种方法可以根据内容和列数自动计算行数？

grid-auto-flow: column is required to make the column wrapping work, but also forces me to add grid-template-rows: repeat(5, 1em) to specify a row count, which breaks the responsiveness. Is there a way to calculate the row count automatically based on content and column count?

grid-auto-flow：列 不使列包装起作用。实际上，它恰恰相反。该规则创建新的列以容纳其他网格项。

grid-auto-flow: column does not make column wrapping work. In fact, it does the exact opposite. The rule creates new columns to accommodate additional grid items.

这里是它的工作方式（根据规范）：

Here's how it works (from the spec):

7.7。自动放置：网格自动流动
属性

未自动放置的网格项目通过自动放置
算法自动放置到
网格容器中未被占用的空间中。

Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm.

网格自动流动控制自动放置算法的工作方式，
确切指定自动放置的项目会流入网格。

grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

列

自动放置算法通过在
轮中填充每一列并根据需要添加新列来放置项目。

The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.

行

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

The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

关于您的问题：

是否有一种基于内容和列数自动计算行数的方法？

Is there a way to calculate the row count automatically based on content and column count?

仅凭CSS Grid，我不会不要相信。如规范中所述， grid-auto-flow 旨在沿指定方向添加新轨道（列 / row ）。

With CSS Grid alone, I don't believe so. As it says in the spec, grid-auto-flow is designed to add new tracks in the specified direction (column / row).

如果可以使用Grid来完成，那么它不是全自动的。

If it can be done with Grid, then it wouldn't be fully automatic. You would need at least some defined placement and, I would guess, media queries.

最后，关于列换行，这来自于 grid-template-columns 和<中的自动调整或自动填充值code>网格模板行属性。

Lastly, with regard to column wrapping, that comes from the auto-fit or auto-fill values in the grid-template-columns and grid-template-rows properties.

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

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

This goes back to the spec section highlighted above.

这是您的列大小代码：

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

这表示：每个显式列的宽度必须至少为33.333％，并且最多50％。

问题是第三列不是 explicit 。它是隐式，因为它是在 grid-auto-flow：column 的指导下通过自动放置算法添加到网格中的。因此，此列不受 grid-template-columns 的约束，该列仅与 明确跟踪尺寸 。

The problem is that the third column is not explicit. It is implicit, as it is being added to the grid by the auto-placement algorithm, under the guidance of grid-auto-flow: column. So this column is not subject to grid-template-columns, which deals solely with explicit track sizing.

的属性href = https://www.w3.org/TR/css3-grid-layout/#auto-tracks rel = nofollow noreferrer> 隐式跟踪大小 是网格自动列和网格自动行。它们的默认值为 auto ，这是您在布局中看到的内容：第三列是其内容的宽度。

The properties for implicit track sizing are grid-auto-columns and grid-auto-rows. Their default value is auto, which is what you're seeing in your layout: The third column is the width of its content.

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 的值，第三列的大小就可以适当设置。

Once you set the value of grid-auto-columns, the third column can be properly sized.

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>

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

Of course, the information above is intended to be an explanation, not a solution to the main problem, as I don't believe CSS Grid provides one.

这篇关于具有列顺序的响应式多列列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！