Atributo grid-auto-flow de CSS

Definición y uso

La propiedad grid-auto-flow controla cómo se insertan los elementos que se colocan automáticamente en la cuadrícula.

Vea también:

Tutorial CSS:Diseño de cuadrícula CSS

Ejemplo

Ejemplo 1

Inserte automáticamente elementos uno por uno en columnas:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Pruebe usted mismo

Ejemplo 2

Llene todos los huecos en la cuadrícula agregando el valor "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
row Valor predeterminado. Coloque los elementos llenando cada fila.
column Coloque los elementos llenando cada columna.
dense Coloque los elementos llenando cualquier hueco en la cuadrícula.
row dense Coloque los elementos llenando cada fila y llenando cualquier hueco en la cuadrícula.
column dense Coloque los elementos llenando cada columna y llenando cualquier hueco en la cuadrícula.

Detalles técnicos

Valor predeterminado: row
Herencia: No
Producción de animación: Admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de Diseño de Cuadrícula CSS Nivel 1
Sintaxis de JavaScript: object.style.gridAutoFlow="row dense"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que completamente admite esa propiedad.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44