Las propiedades grid-template y grid
La propiedad grid-template
La propiedad grid-template es el método abreviado ( shorthand ) para declarar las propiedades grid-template-rows, grid-template-columns y grid-template-areas en una sola línea de código. La especificación nos dice que su valor puede ser:
none | [ <‘grid-template-rows’> / <‘grid-template-columns’> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
Veamos que quiere decir.
none
El valor de grid-template puede ser none. En este caso no hay filas ni columnas ni líneas. Tampoco hay áreas del grid definidas.
grid-template: none;
[ <‘grid-template-rows’> / <‘grid-template-columns’> ]
Esto define primero las filas ( rows ) y después las columnas ( columns ) en una sola declaración.
Ejemplos:
grid-template: 1fr 2fr / 1fr 1fr 1fr;es equivalente de:
grid-template-rows: 1fr 2fr; grid-template-columns: 1fr 1fr 1fr;
Veamos otro ejemplo. Esta vez también definimos las líneas del grid. ( Como ya se sabe el nombre de las líneas que definimos aparece entre corchetes. )
grid-template: [r1] 1fr [r2] 2fr [r3]
/ [c1] 1fr [c2] 1fr [c3] 1fr [c4];es equivalente de:
grid-template-rows:[r1] 1fr [r2] 2fr [r3]; grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr [c4];
See the Pen Grid grid-template #1* by Gabi (@enxaneta) on CodePen.
<line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
También podemos definir las áreas junto con las filas y las columnas. Los nombres de línea son opcionales ( <line-names>? ). También opcional es el tamaño del carril ( <track-size>? ). En el siguiente ejemplo, como siempre, los nombres de las áreas del grid ( <string> ) aparecen entre comillas. Los nombres de las líneas del grid ( <line-names> ) aparecen entre corchetes.
La primera parte de la declaración establece la estructura de filas ( rows ). A continuación aparece el separador, una barra oblicua ( / ) y después viene la parte que establece la estructura de columnas. Definimos las áreas del grid en la primera parte de la declaración, junto con los demás parámetros que establecen la estructura de filas.
grid-template: [r1a] "a a c" 1fr [r1b] /*primera fila*/ [r2a] "b b c" 2fr [r2b] /*segunda fila*/ [r3a] "f f f" .5fr [r3b] /*tercera fila*/ / [c1] 20% [c2] 1fr [c3] 40%; /*la estructura de columnas*/
esto es equivalente a:
grid-template-rows: [r1a] 1fr [r1b r2a] 2fr [r2b r3a] .5fr [r3b];
grid-template-columns: [c1] 20% [c2] 1fr [c3] 40%;
grid-template-areas: "a a c"
"b b c"
"f f f";See the Pen Grid grid-template #2 by Gabi (@enxaneta) on CodePen.
La propiedad grid
La propiedad grid es el método abreviado ( shorthand ) para establecer las propiedades grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow, grid-column-gap y grid-row-gap en una sola declaración.
Si una de estas propiedades no aparece en la declaración, esta tomará el valor por defecto. Recordemos el valor predeterminado de estas propiedades.
Esto es normal; pasa siempre cuando utilizamos declaraciones abreviadas. Lo extraño es que la propiedad grid no nos da la oportunidad de declarar el espaciado de celda ( grid-column-gap y grid-row-gap ). Por lo cual siempre después de grid ( la propiedad grid ) el valor de grid-gap será 0. Tampoco podemos declarar un valor para grid-auto-rows y grid-auto-columns. Así que después de grid el valor de estas dos propiedades será auto.
grid-template-rows: none grid-template-columns: none grid-template-areas: none grid-auto-rows: auto grid-auto-columns: auto grid-auto-flow: row grid-column-gap: 0 grid-row-gap: 0
La sintaxis de grid
Esto es lo que encontramos si leemos la especificación:
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Lo que dice todo esto es que la propiedad grid puede tener la misma sintaxis que grid-template. O sea: podemos utilizar grid en lugar de grid-template, con la única diferencia que grid pondrá a 0 el valor de grid-gap.
<'grid-template'>
See the Pen Grid grid #1 by Gabi (@enxaneta) on CodePen.
Además la propiedad grid puede tener estas otras dos sintaxis:
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Para entender de que va, veamos algunos ejemplos:
grid: 1fr .5fr / auto-flow 50%;es equivalente de:
grid-template-rows:1fr .5fr; grid-auto-flow:column; grid-auto-columns:50%; grid-gap:0;
See the Pen GRID auto-flow* #1 by Gabi (@enxaneta) on CodePen.
Y esto:
grid: 1fr .5fr / auto-flow dense 33%;es equivalente de:
grid-template-rows:1fr .5fr;
grid-auto-flow:column dense;
grid-auto-columns:50%;
grid-gap:0;Otro ejemplo:
grid: auto-flow 50% /1fr .5fr;es equivalente de:
grid-template-columns:1fr .5fr; grid-auto-flow:row; grid-auto-rows:50%; grid-gap:0;
See the Pen GRID auto-flow* #2 by Gabi (@enxaneta) on CodePen.
Y esto:
grid: auto-flow dense 50% /1fr .5fr;es equivalente de:
grid-template-columns:1fr .5fr;
grid-auto-flow:row dense;
grid-auto-rows:50%;
grid-gap:0;La palabra clave auto-flow
En todos estos casos, la palabra clave auto-flow establece un flujo automático para la caja grid. Si auto-flow aparece junto con los demás parámetros que establecen la estructura de columnas, esto equivale a grid-auto-flow: column. Lo mismo pasa para filas. En este caso la palabra clave auto-flow equivale a grid-auto-flow: row. Al lado de auto-flow puede aparecer, o no, la palabra clave dense.
Lea más acerca de grid-auto-flow.