Ahorra Tiempo con la Propiedad CSS Abreviada para "grid"

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En anteriores tutoriales hemos aprendido a configurar una retícula con grid, definir sus propiedades concretas (como grid-template-columns y grid-template-areas) e incluso algunas de sus propiedades implícitas (como grid-auto-colums). En este tutorial vamos a ver la propiedad grid abreviada, la cual gestiona todas las anteriores en una única declaración.

Tu Grid, en Dos Sencillas Líneas

Como hacemos habitualmente, empieza con la declaración display: grid; en tu elemento contenedor. Después, usa la propiedad grid para definir las filas, y finalmente las columnas:

1	.grid-1 {
2	display: grid;
3	grid: 100px auto 300px / repeat(2, 1fr) 100px;
4	}

La declaración anterior indica que deseamos tres filas explícitas de 100px, auto y 300px. Y (usando la función repeat()) dos columnas de 1 fr, y después una de 100px. Es exactamente lo mismo que esta versión más larga:

.grid-1 {
    display: grid;
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;
}

Ambas declaraciones nos proporcionan lo siguiente:

Please accept marketing cookies to load this content.

Añadir Valores Implícitos en la Mezcla

Los valores implícitos son los que le pedimos a Grid que utilice más allá de los valores explícitos que definimos. En la abreviación grid podemos combinar ambos, de manera que tenemos que elegir. Echa un vistazo al siguiente ejemplo:

1	.grid-1 {
2	display: grid;
3	grid: auto-flow 100px / 1fr 100px;
4	}

En este caso hemos mantenido las columnas explícitas (una de 1 fr, y otra de 100px) pero nuestras filas usan una forma abreviada de grid-auto-flow y grid-auto-rows. Esto indica que "cuando necesites añadir más pistas a la retícula, agregarlas como filas. Y haz que cada una tenga 100px de altura." Es lo mismo que esto:

.grid-1 {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-auto-flow: row;
  grid-auto-rows: 100px;
}

Este es prácticamente el comportamiento por defecto, pero podemos observar un gran cambio si en vez de esto le pedimos a nuestra red implícita que use columnas adicionales:

1	.grid-1 {
2	display: grid;
3	grid: 100px 300px / auto-flow 100px;
4	}

Esto nos proporciona filas de 100px y 300px, y después establece grid-auto-flow: column;. Es lo mismo que:

.grid-1 {
  display: grid;
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 100px;
}

Ahora, el algoritmo que posiciona automáticamente los elementos, los colocará desde arriba hacia abajo, añadiendo columnas a la derecha cuando se quede sin espacio:

Please accept marketing cookies to load this content.

Nota: no podemos declarar auto-flow tanto en las filas como en las columnas, eso no funcionaría.

La Palabra Clave Que Empaqueta

Si piensas en nuestro anterior tutorial Entender el "Algoritmo Auto-Placement" de CSS Grid recordarás que debatimos sparse y dense; palabras clave que describen la forma en la que son organizados los elementos en la retícula. Estos pueden usarse también junto con auto-flow, de la siguiente forma:

1	.grid-1 {
2	display: grid;
3	grid: 100px 300px / auto-flow dense 100px;
4	}

Zonas de la Plantilla de Grid

Las áreas de plantilla son una forma de nombrar ciertas áreas de nuestra retícula, en un modo casi visualmente descriptivo. En su forma más simple, usaríamos sencillamente grid para describir las áreas de nuestra plantilla y nada más:

.grid-1 {
    display: grid;
    grid:   "header   header   header" 
            "main     main     sidebar"
            "footer   footer   footer";
}

Después, declararíamos qué área ocupará cada elemento de la retícula, de la siguiente forma:

1	.item-1 {
2	grid-area: header;
3	}

Si recuerdas nuestro tutorial sobre las áreas de una plantilla, tendremos algunos detalles más para configurar las dimensiones de las columnas y las filas:

.grid-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 80px 180px 80px;
    grid-template-areas:    "header   header   header"
                            "main     main     sidebar"
                            "footer   footer   footer";
}

También podemos hacerlo de la siguiente forma:

.grid-1 {
    display: grid;
    grid:   "header   header   header" 80px 
            "main     main     sidebar" 180px
            "footer   footer   footer" 80px
            / 1fr 1fr 1fr;
}

Añadimos las anchuras de la columna tras el guión (la función repeat() no funcionará en este caso, pero no sé por qué). Y añadimos la altura de las filas en línea después de las declaraciones de área. Esto es con lo que terminamos:

Please accept marketing cookies to load this content.

Conclusión

Este tutorial debería haberte proporcionado una comprensión sobre cómo funciona la abreviación de la propiedad grid. Realiza pruebas con ella, observa lo que otros aspectos del módulo CSS Grid puedes usar con ella, y ¡cuéntanos cuánto tiempo te ahorra!

Tutoriales Relevantes y Enlaces

Sintaxis de la abreviación de grid en MDN
Especificaciones para la abreviación de grid en W3C