CSS Grid: определение максимального количества столбцов без Media Queries

Вопрос:

answer:

Решение:

создать контейнер сетки со свойством Display: Grid.
3. объяснение:

макс (ширина 100%/n) гарантирует, что ширина столбца будет максимальной или максимальной. Ширина.

В результате, когда ширина контейнера увеличивается, столбцы будут расширяться, чтобы соответствовать доступному пространству в пределах определенного максимального числа столбцов. Элементы будут автоматически обертываться в новые строки по мере необходимости.

. Grid-Container { --N: 4; / * Максимальное количество столбцов */ дисплей: сетка; Колонны сетки сетки: повтор (Auto-Fill, Minmax (Max (200px, 100%/var (-N)), 1FR)); } ]

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

в следующем примере контейнер сетки создается с максимумом 4 столбцами, а элементы обертывают соответствующие: