css grid: definiendo un número máximo de columnas sin consultas de medios

Pregunta:

¿Podemos especificar una red de css con un número máximo de columnas, mientras que permiten los elementos de los elementos de los elementos de los elementos de la red El ancho de la pantalla cambia?

Respuesta:

Sí, usando la cuadrícula CSS, podemos lograr esto sin el uso de JavaScript o consultas de medios. Este enfoque utiliza el concepto de columnas de ajuste automático:

Solution:

crea un contenedor de cuadrícula con la propiedad de la cuadrícula:
Establezca la propiedad de las columnas de template de la cuadrícula con la función de repetir () Auto-fíteo, use Minmax (max (ancho, 100%/n), 1fr) para especificar el comportamiento de la columna.
explicación:

max (width, 100%/n) asegura que la columna width será el máximo width o una fracción (100%) Ancho.

1fr establece que el ancho de la columna predeterminado sea 1 fracción del espacio restante.

como resultado, cuando el ancho del contenedor aumenta, las columnas se expandirán para adaptarse al espacio disponible dentro del número máximo definido de columnas. Los elementos se envolverán automáticamente en nuevas filas según sea necesario.

Code Snippet:

. Grid-Container { --n: 4; / * El número máximo de columnas */ Pantalla: cuadrícula; Columnas de plantilla de cuadrícula: repetir (relleno automático, minmax (max (200px, 100%/var (-n)), 1fr)); }

Ejemplo:

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

en el siguiente ejemplo, se crea un contenedor de cuadrícula con un máximo de 4 columnas, y los elementos envuelven en consecuencia:

con este enfoque, podemos define un máximo nuevas filas a medida que cambia el ancho de la pantalla, sin la necesidad de consultas de medios.