12. Resumen Grid

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
Scroll al inicio