Grid CSS tiene las propiedades grid-auto-columns y grid-auto-rows para otorgar un tamaño automático a las celdas de la cuadrícula. Tan sólo hay que especificar el tamaño deseado en cada una de las propiedades. Además, también podemos utilizar grid-auto-flow para indicar el flujo de elementos en la cuadrícula, y especificar por donde se irán añadiendo. Las propiedades son las siguientes.
| Propiedad | Valores | Descripción |
|---|---|---|
grid-auto-columns |
Indica el tamaño automático de ancho que tendrán las columnas. | |
grid-auto-rows |
Indica el tamaño automático de alto que tendrán las filas. | |
grid-auto-flow |
row | column | dense | Utiliza un algoritmo de autocolocación (intenta rellenar huecos). |
Veamos un ejm de como se insertarían los elementos en una cuadrícula de 2×2 utilizando grid-auto-flow por columnas o por filas.
Atajo: Grid
Por último, existe una propiedad grid que sirve de atajo para la mayoría de propiedades CSS relativas a cuadrículas. Su esquema de utilización sería el siguiente, junto a algunos ejemplos.
Ejm
.grid {
/* grid: <grid-template> <grid-auto-flow> <grid-auto-rows> / <grid-auto-columns> */
grid: 100px 20px;
grid: 200px repeat(2, 100px) 300px;
grid: row;
grid: column dense;
grid: row 200px;
grid: row 400px / 150px;
}