Justify-items en CSS: Cómo alinear los elementos con estilo y precisión

¿En alguna ocasión te has preguntado cómo podrías lograr que todos los elementos de una cuadrícula se vean perfectamente alineados? Hace años, cuando empecé a usar CSS Grid, me enfrenté al desafío de organizar los elementos para que no quedaran desordenados. Por entonces, conocí justify-items, una propiedad que cambió para siempre mi manera de maquetar, pues me facilitó la vida. Hoy quiero compartir contigo todo lo que necesitas para que tú también la domines.

En este artículo, voy a contarte qué es justify-items en CSS, para qué sirve, su sintaxis y cómo usarla con ejemplos claros y prácticos.

¿Qué es justify-items en CSS?

Cuando trabajas con CSS Grid en tu diseño, la propiedad justify-items te ayuda a alinear horizontalmente todos los elementos dentro de sus celdas para mantener una apariencia uniforme y organizada en tu cuadrícula. De esta manera, te aseguras de que cada elemento ocupe su lugar de manera consistente, lo que mejora la estética y la funcionalidad del diseño.

Es como si justify-items fuera el GPS que guía a tus elementos en el sentido horizontal dentro de las celdas. Aquí, tú debes preguntarte si quieres que todo quede perfectamente centrado,  o si prefieres que los elementos se alineen hacia la izquierda o la derecha. En cualquiera de los casos, esta es la propiedad que hará que todo esto sea posible con una sola línea de código.

¿Para qué sirve justify-items?

De una forma muy concreta, podríamos decir que el propósito de justify-items es proporcionar un control preciso sobre la alineación horizontal de los elementos en un grid. Pero veamos con un poco más de detalle sus usos más comunes:

1. Alinear todos los elementos en una cuadrícula: Cuando tienes un diseño basado en CSS Grid, puedes usar justify-items para aplicar la misma alineación horizontal a todos los elementos del contenedor.
2. Mejorar la consistencia visual: ¿Te ha pasado que entras a una página web y los elementos se ven como si estuvieran flotando por ahí sin un patrón claro? Cuando trabajamos en un diseño, debemos tener cuidado con que este tipo de cosas sucedan. Justify-items sirve para que todo siga una misma regla de alineación, lo que da como resultado un diseño más limpio y profesional.
3. Facilitar el mantenimiento del código: Con esta propiedad no hace falta que agregues reglas de alineación individuales a cada elemento, ya que puedes aplicar justify-items al contenedor y dejar que haga el trabajo por ti. Al tener menos código, también puedes modificarlo y actualizarlo más fácilmente.

Sintaxis de justify-items

Realmente, la sintaxis de esta propiedad es sencilla y fácil de entender, pues sigue una estructura bastante concisa que te permite alinear los elementos con solo una línea de código. Veamos cómo es:

justify-items: start | end | center | stretch;

Valores

Puedes complementar esta sintaxis usando los diferentes valores disponibles para la propiedad según la forma en que esperas que se alineen horizontalmente todos los elementos dentro de la cuadrícula. 

Estos son los valores posibles:

• start: Los elementos se alinean hacia el inicio del contenedor, normalmente, a la izquierda.
• end: Los elementos se alinean hacia el final del contenedor, por lo general, a la derecha.
• center: Los elementos se colocan en el centro de las celdas.
• stretch: Los elementos ocupan todo el ancho disponible de sus celdas. Este es el valor por defecto.

Ejemplos con justify-items

Vamos a ver un par de ejemplos que te pueden ayudar a comprender mejor cómo puedes utilizar esta propiedad.

Alinear elementos al centro

Supongamos que tienes un grid básico y quieres que todos los elementos estén perfectamente centrados dentro de sus celdas. Puedes hacer lo siguiente:

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 10px;
  }

  .item {
    background-color: lightblue;
    padding: 20px;
  }
</style>

En este caso, justify-items: center; coloca todos los elementos exactamente en el medio de sus celdas.

Usar stretch para llenar las celdas

Puede que quieras que cada elemento se ajuste automáticamente al ancho de su celda. En este caso, podrías usar stretch:

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
    gap: 10px;
  }

  .item {
    background-color: lightgreen;
    text-align: center;
  }
</style>

Al hacer esto, los elementos se expanden para ocupar todo el ancho de sus celdas. Y así, consigues un diseño uniforme.

¿Cuál es la diferencia entre justify-items y otras propiedades similares?

Es fácil llegar a confundir las diferentes propiedades que se utilizan para alinear los elementos en CSS, especialmente cuando no sabemos reconocer sus diferencias. Para que esto no te pase, te traigo una breve explicación de cada una de estas propiedades:

Propiedad	Función
justify-items	Se centra exclusivamente en alinear horizontalmente los elementos dentro de sus celdas.
justify-content	Alinea y distribuye el espacio de toda la cuadrícula dentro de su contenedor horizontalmente.
align-items	Alinea todos los elementos hijos verticalmente dentro de sus celdas.

Básicamente, justify-content alinea y distribuye todo el contenido de una cuadrícula dentro de su contenedor en el eje horizontal, mientras que justify-items se centra en alinear horizontalmente todos los elementos dentro de sus celdas individuales.

Consejos para usar justify-items

Luego de todo lo que hemos visto, te traigo algunas recomendaciones bastante precisas que puedes tener en consideración al momento de implementar esta propiedad:

1. Define tu grid antes: Lo mejor es que te asegures de estructurar correctamente tu grid con grid-template-rows y grid-template-columns antes de aplicar justify-items.
2. No abuses del valor default: Aunque el valor stretch es muy útil, no siempre es la mejor opción. Por eso, te recomiendo que evalúes siempre qué valor funciona mejor para tu diseño.
3. Combina con otras propiedades: Puedes usar justify-items junto con align-items para tener un control completo sobre la alineación de tus elementos, ya que uno se encargará del eje Y y el otro del eje X, como si estuvieras en un plano cartesiano.

Espero que todo lo que has aprendido hoy te sea de mucha utilidad. Ciertamente, la propiedad justify-items es una de esas herramientas que facilitan el diseño y ayudan a mantener el código ordenado, gracias a su capacidad para alinear horizontalmente los elementos dentro de una cuadrícula. Así que si quieres lograr layouts modernos y funcionales, ya tienes lo que necesitas para empezar a practicar.

¿Quieres continuar mejorando tus habilidades de desarrollo y convertirte en todo un experto de la materia? En KeepCoding, consideramos imprescindible combinar la teoría con la práctica, por lo que hemos diseñado nuestro Bootcamp en Desarrollo Web para que puedas potenciar tus habilidades con prácticas constantes, de la mano de profesores expertos. Únete a nuestro programa y aprende a crear páginas web innovadoras y funcionales que te abran la puerta para trabajar en el demandado sector de la tecnología.

¿Te atreves a transformar tu vida profesional?