Atributo CSS justify-items

Definition and Usage

The justify-items attribute is set on the grid container to align the child elements (grid items) in the inline direction.

For English pages, the inline direction is from left to right, and the block direction is downward.

For this attribute to have any alignment effect, the grid item must leave available space around itself in the inline direction.

Tip:To align grid items in the block direction instead of the inline direction, use align-items attribute Properties.

See also:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Positioning

CSS Reference Manual:align-items attribute

CSS Reference Manual:direction attribute

CSS Reference Manual:grid attribute

CSS Reference Manual:grid-template-columns attribute

CSS Reference Manual:justify-self attribute

CSS Reference Manual:position attribute

CSS Reference Manual:writing-mode attribute

Instance

Example 1

Align each grid item at the end of its grid cell along the inline direction:

#container {
  display: grid;
  justify-items: end;
}

Pruebe usted mismo

Example 2: Comparison of justify-items and justify-self

Set the alignment relative to the container to 'centered', and set the grid item itself to 'right-aligned'. The attribute value 'right' takes precedence:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Pruebe usted mismo

Example 3: Set justify-items on an absolutely positioned grid item

Set the alignment of the grid item with absolute positioning to 'right-aligned':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Pruebe usted mismo

Example 4: writing-mode

When the writing-mode attribute value of the grid container element is set to vertical-rl, the inline direction is downward. The result is that the starting point of the container moves from the left to the top, and the end point of the container moves from the right to the bottom:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Pruebe usted mismo

Ejemplo 5: direction

Cuando el valor del atributo direction del elemento contenedor de cuadrícula se establece en 'rtl', la dirección en línea es de derecha a izquierda. El resultado es que el punto de partida del contenedor se mueve desde la izquierda a la derecha, y el extremo del contenedor se mueve desde la derecha a la izquierda:

#container {
  justify-items: start;
  direction: rtl;
}

Pruebe usted mismo

Sintaxis de CSS

justify-items: legacy|normal|stretch|Alineación posicional|alineación-de-desbordamiento|Alineación de basura|initial|inherit;

Valor del atributo

Valor Descripción
legacy

Valor predeterminado.

Sólo cuando el valor de justify-self del elemento de cuadrícula comienza con 'legacy', el elemento de cuadrícula hereda el valor del atributo justify-items del contenedor de cuadrícula.

Su existencia es para implementar el comportamiento de alineación heredado de los elementos <center> de HTML y las propiedades align.
normal Depende del contexto de diseño, pero es similar a 'stretch' del diseño de cuadrícula.
stretch Si no se establece inline-size (ancho), se estira para llenar la celda de la cuadrícula.
start Alinea los proyectos al principio de la dirección en línea.
left Alinea los proyectos a la izquierda.
center Alinea los proyectos al centro.
end Alinea los proyectos al final de la dirección en línea.
right Alinea los proyectos a la derecha.
alineación-de-desbordamiento
  • 'safe' establecerá el modo de alineación del proyecto en 'start', si el contenido se desborda.
  • 'unsafe' mantiene el valor de alineación, independientemente de si el contenido del proyecto se desborda.
alineación-de-basura El elemento se alinea con la línea base del elemento padre.
initial Establezca este atributo en su valor predeterminado. Véase initial.
inherit Hereda este atributo del elemento padre. Véase inherit.

Detalles técnicos

Valor predeterminado: legacy
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.justifyItems="center"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0