Propiedad CSS justify-items

La propiedad CSS justify-items establece la alineación predeterminada para cada elemento dentro de un contenedor a lo largo del eje en línea (fila) — en un idioma de izquierda a derecha, eso corresponde a la dirección horizontal. Se aplica al contenedor y actúa como un valor justify-self predeterminado para todos sus hijos a la vez. Cada elemento individual puede anular ese valor predeterminado con su propio valor justify-self.

En un CSS Grid, justify-items controla la posición de cada elemento horizontalmente dentro de su propia celda de cuadrícula — izquierda, derecha, centrado o estirado para rellenar la celda. La propiedad complementaria align-items hace lo mismo a lo largo del eje de bloque (columna), y la abreviación place-items establece ambas en una sola declaración.

Cuándo usarla

Recurra a justify-items cuando tenga una cuadrícula y desee que todas las celdas compartan la misma ubicación horizontal sin tener que escribir justify-self en cada elemento. Casos típicos:

Centrar el contenido dentro de cada celda de cuadrícula (center).
Empujar las celdas hacia el borde de inicio o fin (start / end).
Permitir que los elementos se estiren para ocupar el ancho completo de la celda (stretch, el valor predeterminado de la cuadrícula).

Nota: justify-items se aplica a los contenedores de cuadrícula y a los elementos con posicionamiento absoluto. Se ignora en Flexbox — use justify-content para distribuir los elementos flex a lo largo del eje principal.

Valor inicial	auto
Se aplica a	Contenedores de cuadrícula y elementos con posicionamiento absoluto.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.justifyItems = "start";

Sintaxis

Valores de CSS justify-items

justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;

Ejemplo: justify-items con el valor "start"

Ejemplo de código CSS justify-items

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: start;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Con justify-items: start, cada elemento se desplaza hacia el borde izquierdo de su celda de cuadrícula. Cambie el valor a center, end o stretch (a continuación) para ver cómo se mueven los elementos dentro de las mismas celdas.

Ejemplo: justify-items con el valor "center"

Ejemplo de CSS justify-items center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: center;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo: justify-items con el valor "first-baseline"

Ejemplo de la propiedad justify-items con el valor "first-baseline":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: grid;
        padding-top: 10px;
        height: 250px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        background: #ccc;
        justify-items: first-baseline;
      }
      .item {
        width: 50%;
        height: 50%;
        text-align: center;
      }
      .item1 {
        background: red;
      }
      .item2 {
        background: blue;
      }
      .item3 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div class="container">
      <div class="item1 item">1</div>
      <div class="item2 item">2</div>
      <div class="item3 item">3</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo: justify-items con el valor "self-end"

Ejemplo de la propiedad justify-items con el valor "self-end":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: self-end;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
auto	Si el elemento no tiene padre o está posicionado de forma absoluta, el valor auto representa normal.
normal	El efecto depende del modo de diseño: • Diseños de bloque: se comporta como `start`. • Diseños con posicionamiento absoluto: se comporta como `start` para elementos reemplazados, y como `stretch` para los demás. • Celdas de tabla: ignorado. • Flexbox: ignorado. • Diseños de cuadrícula: se comporta como `stretch`, excepto para los elementos con relación de aspecto o tamaño intrínseco, donde se comporta como `start`.
start	Todos los elementos se posicionan juntos en el borde de inicio (izquierda) del contenedor.
end	Todos los elementos se posicionan juntos en el borde final (derecha) del contenedor.
flex-start	Los elementos se colocan al comienzo del contenedor.
flex-end	Los elementos se colocan al final del contenedor.
self-start	El elemento puede posicionarse en el borde del contenedor según su propio lado de inicio.
self-end	El elemento puede posicionarse en el borde del contenedor según su propio lado final.
center	Los elementos se posicionan juntos hacia el centro del contenedor.
left	Los elementos se colocan juntos hacia el lado izquierdo del contenedor. Si el eje de la propiedad no es paralelo al eje en línea, este valor se comporta como end.
right	Los elementos se colocan juntos hacia el lado derecho del contenedor. Si el eje de la propiedad no es paralelo al eje en línea, este valor se comporta como start.
baseline	Alinea todos los elementos dentro de un grupo haciendo coincidir sus líneas base de alineación.
first-baseline	Alinea todos los elementos dentro de un grupo haciendo coincidir sus primeras líneas base de alineación.
last-baseline	Alinea todos los elementos dentro de un grupo haciendo coincidir sus últimas líneas base de alineación.
stretch	Estira el elemento para ajustarse al contenedor a lo largo del eje en línea/principal.
safe	Si el tamaño del elemento desborda el contenedor de alineación, el elemento se alinea como si el modo de alineación fuera start.
unsafe	Independientemente del tamaño del elemento y del contenedor de alineación, se respeta el valor de alineación.
legacy	Palabra clave heredada para compatibilidad con versiones anteriores. Se asigna a `flex-start`, `flex-end` o `center` según el modo de diseño. No afecta a la herencia.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

justify-items vs justify-self

Estas dos propiedades son similares, pero se aplican a elementos diferentes:

justify-items se establece en el contenedor y proporciona una alineación horizontal predeterminada para todos sus elementos.
justify-self se establece en un elemento individual y anula el valor justify-items del contenedor solo para ese elemento.

Por eso, un patrón habitual es establecer un valor predeterminado con justify-items en la cuadrícula y ajustar uno o dos elementos especiales con justify-self.

justify-items vs align-items

justify-items y align-items actúan sobre ejes perpendiculares:

justify-items → eje en línea (fila) — posición horizontal en un documento de izquierda a derecha.
align-items → eje de bloque (columna) — posición vertical.

Para establecer ambos a la vez, use la abreviación place-items: place-items: <align-items> <justify-items>.

Compatibilidad con navegadores

justify-items es compatible con todos los navegadores modernos (Chrome, Edge, Firefox, Safari y Opera) como parte del módulo de alineación de cuadro CSS. Su principal caso de uso — la alineación dentro de CSS Grid — también cuenta con amplia compatibilidad.

Práctica

¿Qué hace la propiedad CSS 'justify-items'?

Alinea los elementos de cuadrícula a lo largo del eje horizontal/de columna.Establece el color de los elementos de cuadrícula.Alinea los elementos de cuadrícula a lo largo del eje vertical/de fila.Establece el tamaño de los elementos de cuadrícula.Funciona dentro del modelo de diseño de cuadrícula.