grid-auto-flow

Índice

Definición de .grid-auto-flow aplicado en CSS

La propiedad CSS .grid-auto-flow es parte de la especificación de diseño de cuadrícula CSS que nos permite controlar el flujo de elementos de la cuadrícula que se colocan automáticamente cuando no se colocan explícitamente con ninguna propiedad de colocación de cuadrícula.

Ejemplo de empleo de grid-auto-flow

Esta propiedad de CSS habitualmente se utiliza de la siguiente manera:

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-auto-flow: dense;
}

Sintaxis de .grid-auto-flow en CSS

  grid-auto-flow:   row|column|dense|row dense|column dense;

Valores

Valor Descripción Manifestación
fila Valor por defecto. Coloca artículos llenando cada fila
columna Coloca artículos llenando cada columna
denso Coloque elementos para llenar los agujeros en la cuadrícula
fila densa Coloca los elementos llenando cada fila y llena los agujeros en la cuadrícula
columna densa Coloca los elementos llenando cada columna y llena los agujeros en la cuadrícula

Exploradores compatibles con .grid-auto-flow

Los números de la tabla detallan la primera versión del navegador que es absolutamente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
grid-auto-rows 57 16 52 10 44

Referencias técnicas

Es probable que también quieras echar un vistazo a estas otras propiedades de CSS

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso