CSS Grid es un sistema de posicionamiento de elementos en CSS basado en una cuadrícula completamente modificable. Al igual que el posicionamiento avanzado con Flexbox, CSS Grid cuenta con propiedades que nos permiten determinar la alineación de los elementos dentro de su contenedor. En este post, te explicamos cómo funciona la alineación de elementos con CSS Grid para que la puedas incorporar en el proceso de diseño de tu página web.
¿Cómo funciona la alineación de elementos con CSS Grid?
La alineación de elementos con CSS Grid nos permite modificar la alineación de los elementos que están dentro del contenedor grid. Es decir, esta alineación no modificará la posición del contenedor en la página web. En CSS Grid hay dos propiedades clave para alinear los elementos dentro del contenedor: justify-content y align-content. A continuación, te explicamos qué hace cada una de las opciones para alinear elementos css, para que tengas deseos de aprender más conceptos como el de centrar elementos con grid o centrar grid.
justify-content
La propiedad justify-content nos permite modificar la alineación de elementos con CSS Grid en el eje de las columnas. Es decir, esta propiedad determinará la alineación de los elementos en el eje horizontal. Al igual que la propiedad justify-content de Flexbox, esta propiedad en CSS Grid tiene varias opciones, cada una con efectos diferentes sobre nuestra cuadrícula.
Ten presente que, para insertar cualquiera de las opciones que detallamos a continuación, primero debes insertar la propiedad justify-content en el contenedor. Además, te recordamos que para que cualquiera de las propiedades de CSS Grid funcione, primero debes insertar la propiedad display:grid en el contenedor de la cuadrícula.
A continuación, puedes encontrar una lista de las propiedades de justify-content para la alineación de elementos con CSS Grid:
- start: esta opción alinea los elementos de la cuadrícula a la izquierda del contenedor, al inicio del eje horizontal.
- end: esta opción nos permite alinear los elementos de la cuadrícula a la derecha, pues es el final del eje horizontal.
- center: esta opción centra horizontalmente los elementos de la cuadrícula.
- stretch: está opción hace que los elementos y sus celdas se estiren horizontalmente para ocupar todo el ancho del contenedor.
- space-between: esta opción agregará espacio entre las columnas, llevando las columnas en los extremos de la cuadrícula hacia los bordes horizontales del contenedor.
- space-around: esta opción crea espacios alrededor de cada elemento en el eje horizontal. Esto quiere decir que las columnas a los extremos también tendrán un espacio entre ellas y los bordes del contenedor. Como cada elemento tiene espacio alrededor, los espacios entre columnas serán el doble que los espacios entre las columnas y los bordes.
- space-evenly: esta opción es muy similar a la opción space-around. La diferencia es que aquí el espacio se reparte de manera equitativa. Esto significa que el espacio entre las columnas es igual que el espacio entre las columnas y los bordes verticales, lo que hace una gran opción para alinear elementos css.
align-content
La propiedad align-content nos permite modificar la alineación de elementos con CSS Grid en el eje de las filas. Es decir, esta propiedad determinará la alineación de los elementos en el eje vertical, lo opuesto a la propiedad justify-content. Al igual que la propiedad align-content de Flexbox, las opciones de esta propiedad son las mismas que su opuesto en el eje horizontal para alinear elementos css. Entonces, basta con que revises la lista de arriba para entender lo que puede llegar a hacer align-content para la disposición de tus filas.
Ten en cuenta que, para determinar la alineación de elementos con CSS Grid, puedes insertar ambas propiedades justify-content y align-content en un mismo contenedor. La combinación de ambas propiedades y sus opciones crea una variedad de alineaciones posibles, con las que te invitamos a jugar.
Además, también puedes alinear elementos css individual dentro de los ejes de su celda usando las propiedades justify-self y align-self. Estas propiedades funcionan igual que sus hermanos del mismo nombre, solo que se limitan a las opciones start, end, center y stretch, pues no tienen otros elementos de los que distanciarse.
Hay otros conceptos relacionados a centrar elementos con grid o centrar grid, que deberías ir aprendiendo en el camino.
Ahora que sabes cómo funciona la alineación de elementos con CSS Grid, ¡estás listo para crear tu propia cuadrícula y empezar el diseño de tu propia página web! Puede que esto te suene muy arriesgado, pues es posible que todavía te quede mucho por aprender sobre desarrollo web. Sin embargo, en KeepCoding te ofrecemos la oportunidad de aprenderlo todo para convertirte en un experto en unos cuantos meses, con conceptos tal como centrar elementos con grid o centrar grid.
No dudes en consultare el programa de nuestro Desarrollo Web Full Stack Bootcamp, donde no solo seguirás aprendiendo sobre los lenguajes de programación para la web, sino que también los pondrás en práctica creando y diseñando tu propio sitio web. Así, con la asesoría de nuestros profesores, podrás demostrar todos tus conocimientos en desarrollo web en un solo lugar. ¿A qué esperas para convertirte en un experto del sector IT? ¡Pide más información y apúntate ya!
