Estas son las propiedades que nos vamos a encontrar si a la hora de maquetar nuestras páginas web utilizamos la tecnología Grid CSS.
Propiedades del contenedor
- display: inline-grid / grid
- grid-template-columns: se ponen las columnas que se quieran con los anchos que se quieran (por ejm: grid-template-columns: 200px auto), también se puede utilizar la función repeat() de la siguiente manera (grid-template-columns: repeat(2, 200px);).
- grid-template-rows: los mismos valores que para las columnas.
- grid-template-areas.
- grid-rows: mismo funcionamiento que grid-columns.
- grid-colums: 1 / 3 (iría de la línea 1 a la línea 3)| span1 (usaría toda la línea).
- column-gap: crea huecos en las columnas (column-gap: 100px).
- row-gap: para colocar huecos en las filas.
- gap: shorthand de column-gap y row-gap (ejm: gap: <row-gap> <column-gap>).
- justify-items: distribuye los elementos en el eje horizontal, sus valores son: start / end / center / stretch.
- align-items: distribuye los elementos en el eje vertical, sus valores son: start / end / center / stretch.
- justify-content: actúan sobre todo el bloque en el eje horizontal, los valores son: start / end / center / space-around / space-between / space-evenly.
- align-content: actuan sobre todo el bloque en el eje vertical, los valores son: start / end / center / space-around / space-between / space-evenly.
- grid-auto-columns: indica el tamaño automático de ancho que tendrán las columnas.
- grid-auto-rows: el tamaño automático de ancho de las filas.
- grid-auto-flow: row / column / dense. Sirve para controlar el flujo del grid.
Propiedades para los items (hijos)
- justify-self: sobre un único elemento hijo en el eje horizontal.
- align-self: sobre un único elemento hijo en el eje vertical.
- grid-area
- grid-column-start: indica en que columna empieza el item de la cuadrícula.
- grid-column-end: indica en que columna termina el item de la cuadrícula.
- grid-row-start: indica en que fila empieza el item de la cuadrícula.
- grid-column-end: indica en que fila termina el item de la cuadrícula.
- grid-column
- grid-row