Отзывчивый многоколоночный список с порядком столбцов

Настройте количество столбцов, чтобы изменить количество столбцов :)

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  /*---*/
  column-count: 4;
  column-gap: 0;
  width: 100%;
}

li {
  background-color: grey;
  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>

Давайте пройдемся по двум вашим камням преткновения.

1. #P2#

grid-auto-flow: column не работает перенос столбцов. На самом деле, он делает прямо противоположное. Правило создает новые столбцы для размещения дополнительных элементов сетки.

Вот как это работает (из спецификации):

7.7. Автоматическое размещение: свойство grid-auto-flow

Элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере сетки с помощью алгоритма автоматического размещения.

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.

2. #P17#

Это восходит к разделу спецификаций, выделенному выше.

Это ваш код размера столбца:

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

Это означает: Ширина каждого явного столбца должна быть не менее 33,333 % и не более 50 %.

Проблема в том, что третий столбец не является явным. Он неявный, так как добавляется в сетку алгоритмом автоматического размещения под руководством grid-auto-flow: column. Таким образом, этот столбец не подпадает под действие grid-template-columns, которое касается исключительно явный размер трека.

Свойства для неявного определения размера дорожки это grid-auto-columns и 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>

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>