Estoy buscando una manera de generar automáticamente una cuadrícula, que siempre llene el espacio disponible, mientrascontracción los elementos hasta que se pueda agregar otro elemento.

Las implementaciones de cuadrícula más receptivas usan algo que vincula esto:

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

Esto funciona bien, excepto que utiliza el valor mínimo como el tamaño de imagen predeterminado, lo que resulta en la interpolación de las imágenes dentro de la cuadrícula. Quiero hacer lo contrario: establecer un ancho máximo y reducir las imágenes si es necesario.

Supongamos que mis elementos de cuadrícula deben tener un ancho máximo de 400 px. Estos son algunos de los valores que quiero obtener:

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 …

Esencialmente quiero sujetar mi imagen entre 200 px y 400 px y usar siempre el mayor valor posible. Supongo que necesito algo como esto:

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

La única forma en que pude lograr esto hasta ahora fue generando algunas consultas de medios.

/* 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));
  }
}

He escrito unSass mixin para hacer este proceso más flexible, pero esta solución viene con algunos inconvenientes:

Debe generar una cantidad arbitraria de consultas para manejar múltiples tamaños de pantalla, lo que probablemente resulte en código muertoDebe conocer el espacio disponible del contenedor de cuadrícula para las consultas de medios (o el espacio utilizado para calcular el espacio disponible)

Estoy buscando una forma que no tenga estos inconvenientes.

Editar:

Aquí hay un CodePen de mi código actual. Debería ser más fácil entender lo que quiero hacer, si juegas con eso.