способ автоматически генерировать сетку, которая всегда заполняет доступное пространство, в то время каксокращение элементы, пока другой элемент не может быть добавлен.

Большинство реализаций адаптивной сетки используют что-то, связывающее это:

grid-template-colums: repeat(auto-fill, minmax(120px, 1fr));

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

Допустим, мои элементы сетки должны иметь максимальную ширину 400 пикселей. Вот некоторые значения, которые я хочу получить:

400px available space: One image with a width of 400px
402px available space: Two images with a width of 201px
800px available space: Two images with a width of 400px
and so on …

По сути, я хочу сжать мое изображение между 200px и 400px и всегда использовать максимально возможное значение. Я думаю, мне нужно что-то вроде этого:

min(max(200px, 1fr), 400px)

Единственный способ, которым я смог достичь этого, - это генерировать некоторые медиа-запросы.

/* This example adjusts items to a max-width of 400px with a 10px grid-gap.*/

@media (min-width: 401px) {
  .grid {
    grid-template-columns: repeat(auto-fill, calc((100% - 10px) / 2));
  }
}
@media (min-width: 811px) {
  .grid {
    grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
  }
}

Я написалSass Mixin чтобы сделать этот процесс более гибким, но это решение имеет некоторые недостатки:

Вы должны сгенерировать произвольное количество запросов для обработки экрана нескольких размеров, что, вероятно, приводит к мертвому кодуВы должны знать доступное пространство контейнера сетки для медиа-запросов (или используемое пространство для расчета доступного пространства)

Я ищу способ, который не имеет этих недостатков.

Редактировать:

Вот CodePen моего текущего кода. Должно быть легче понять, что я хочу сделать, если вы поиграете с этим.