Alineación de elementos con CSS Grid

Autor: | Última modificación: 1 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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.

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.

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. 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 un elemento 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.

¿Cuál es el siguiente paso?

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.

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!