gap y alineación
Espacios en el grid, gap
Por defecto, la cuadrícula tiene sus celdas contiguas. Podríamos darle un margin, pero en grid la forma más apropiada es con gutters, es decir, utilizando las propiedades column-gap y/o row-gap.
- column-gap: establecemos el tamaño de los huecos entre columnas (verticales)
- row-gap: establecemos el tamaño de los huecos entre filas (horizontales)
Alineación de los elementos en grid
Las propiedades que podemos utilizar para colocar y ajustar nuestro grid son: justify-items(alinea los elementos hijos en horizontal), align-items(alinea los elementos hijos en vertical), justify-content(alinea el contenido en horizontal), align-content(alinea el contenido en el eje vertical). Estas propiedades pueden afectar tanto al eje principal o al eje secundario del grid y se aplican tanto al contenedor padre como al comportamiento de los hijos.
justify-items - eje horizontal
- start: cada ítem se posiciona al inicio de su celda en el eje principal
- end: cada ítem se posiciona al final de su celda en el eje principal
- center: cada ítem se posiciona en el centro de su celda en el eje principal
- stretch: cada ítem ocupa todo el espacio disponible de su celda
align-items - eje secundario
La propiedad align-items podemos colocar los ítems de un contenedor grid a lo largo de sus celdas en el eje secundario (vertical). Los valores que puede tener son los mismos que con la propiedad justify-items.
justify-content - eje horizontal
La propiedad justify-content permite modificar la distribución del contenido en la cuadrícula en su contenedor padre, a lo largo de su eje principal (eje horizontal)
align-content - eje secundario
Del mismo modo, la propiedad align-content podemos colocar el contenido de la cuadrícula en su contenedor padre, pero a lo largo del eje secundario (eje vertical). Los valores que puede tener son los mismos que con la propiedad justify-content.
justify-self y align-self
Si queremos que alguno de los ítems hijos tenga una alineación diferente, podemos aplicar en el elemento hijo la propiedad justify-self(eje horizontal), o align-self(eje vertical) sobrescribiendo su distribución y aplicando una específica. Estas propiedades funcionan como justify-items o aligns-items respectivamente, y tienen los mismos valores, la diferencia radica que en lugar de ponerse en el elemento padre (contenedor principal), se pone al hijo que queremos que se aplique.
place-items y place-content
Como siempre, tenemos una propiedad que nos permite agrupar en una sola varias propiedades. Cuando utilizamos las propiedades justify-items y align-items podemos usar directamente place-items: align-items justify-items. Cuando queramos utilizar justify-content y align-content tenemos place-content: align-content justify-content. Y para justify-self y align-self tenemos place-self: align- self justify- self.
order
Por último, dentro de este punto tenemos la propiedad order que funciona como en flex, pudiendo indicarle el orden(“peso”) de los elementos mediante un número. Por defecto, todos los hijos tienen un valor de 0.