Propiedad CSS place-items - Sintaxis, Valores y Ejemplos.

La propiedad CSS place-items es una abreviatura que establece dos propiedades de alineación a la vez:

align-items — alineación a lo largo del eje de bloque (en un diseño predeterminado, la dirección vertical/columna).
justify-items — alineación a lo largo del eje en línea (en un diseño predeterminado, la dirección horizontal/fila).

En lugar de escribir ambas propiedades, se escribe una única declaración place-items. Esto es especialmente útil con diseños de Grid, donde controla cómo se posiciona cada elemento dentro de su propia celda de cuadrícula (los valores de alineación predeterminados aplicados a cada elemento, equivalente a establecer place-self en cada uno).

Esta página cubre la sintaxis, las formas con uno y dos valores, cada valor con lo que realmente hace y los diseños donde place-items no tiene efecto.

¿Cuándo se aplica place-items?

place-items solo tiene efecto en diseños que tienen la noción de "elementos":

Diseños Grid — el caso de uso principal. Alinea cada elemento dentro de su área de cuadrícula.
Cajas absolutamente posicionadas — alinea la caja dentro de su bloque contenedor.

Se ignora en los siguientes casos, lo cual es una fuente común de confusión:

Diseños Flexbox — justify-items (y por lo tanto la mitad en línea de place-items) no hace nada en Flexbox. Usa justify-content y align-items directamente en su lugar.
Cajas de nivel de bloque estándar.
Celdas de tabla.

Información

place-items se comporta de manera diferente según el contexto de diseño: el mismo valor puede significar cosas distintas en Grid frente al posicionamiento absoluto. La tabla de valores a continuación detalla cada caso.

Valor inicial	normal legacy
Se aplica a	Todos los elementos.
Heredable	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.placeItems = "normal";

Sintaxis

place-items: <align-items> <justify-items>?;

Las palabras clave aceptadas son:

place-items: auto | normal | start | end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;

Existen dos formas:

Un valor — establece ambos ejes. place-items: center; significa "centrar verticalmente y centrar horizontalmente."
Dos valores — el primero establece align-items (eje de bloque), el segundo establece justify-items (eje en línea). Por ejemplo, place-items: start end; significa "arriba verticalmente, derecha horizontalmente."

Información

La especificación CSS Grid separa los dos valores con un espacio (place-items: start end), no con una barra. Puede que aún veas una barra en materiales más antiguos; un solo valor es la forma más segura y con mayor soporte.

Ejemplo — valor único (`start`)

Una sola palabra clave alinea los elementos en ambos ejes a la vez. Aquí start empuja el elemento hacia la esquina superior izquierda de su celda de cuadrícula:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: start;
        background-color: #ccc;
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 1px solid #666;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #1c87c9;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items property example</h2>
    <h3>place-items: start</h3>
    <div id="container">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo — dos valores (`end start`)

Con dos palabras clave puedes controlar cada eje de forma independiente. Aquí end start envía el elemento hacia abajo (eje de bloque) y hacia la izquierda (eje en línea):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: end start;
        background-color: #ccc;
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 1px solid #666;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #8ebf42;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>place-items: end start</h2>
    <div id="container">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Ejemplo — valor `center`

Una sola palabra clave center centra cada elemento tanto vertical como horizontalmente dentro de su celda de cuadrícula:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      #container {
        height: 200px;
        width: 230px;
        place-items: center;
        background-color: #ccc;
        display: grid;
      }
      .grid {
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 3px solid #ccc;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #666;
        min-height: 40px;
      }
      #box2 {
        background-color: #1c87c9;
        min-height: 50px;
      }
      #box3 {
        background-color: #fff;
        min-height: 40px;
      }
      #box4 {
        background-color: #ff0000;
        min-height: 60px;
      }
      #box5 {
        background-color: #eee;
        min-height: 70px;
      }
      #box6 {
        background-color: #8ebf42;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items property example</h2>
    <div id="container" class="grid">
      <div id="box1">1</div>
      <div id="box2">2</div>
      <div id="box3">3</div>
      <div id="box4">4</div>
      <div id="box5">5</div>
      <div id="box6">6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
auto	Si la caja no tiene padre o está absolutamente posicionada, el valor "auto" representa "normal".
normal	El efecto de este valor depende del modo de diseño: - En diseños de nivel de bloque, el valor "normal" se comporta como "start". - En diseños absolutamente posicionados, este valor se comporta como "start" en cajas absolutamente posicionadas reemplazadas, y como stretch en todas las demás cajas absolutamente posicionadas. - En diseños de celdas de tabla, esta propiedad se ignora. - En diseños Flexbox, esta propiedad se ignora. - En diseños Grid, este valor se comporta como "stretch", excepto para cajas con una relación de aspecto o tamaños intrínsecos, donde se comporta como "start".
start	Alinea el elemento en el borde inicial de su área de cuadrícula (arriba en el eje de bloque, izquierda en el eje en línea en un diseño de izquierda a derecha).
end	Alinea el elemento en el borde final de su área de cuadrícula (abajo en el eje de bloque, derecha en el eje en línea en un diseño de izquierda a derecha).
self-start	El elemento puede colocarse en el borde del contenedor según su propio lado inicial.
self-end	El elemento puede colocarse en el borde del contenedor según su propio lado final.
center	Los elementos se posicionan uno junto a otro hacia el centro del contenedor.
left	Los elementos se colocan uno junto a otro 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 uno junto a otro 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 la primera línea base del elemento con la primera línea base de la fila.
last baseline	Alinea la última línea base del elemento con la última línea base de la fila.
stretch	Estira el elemento hacia ambos bordes del contenedor vertical y horizontalmente para ajustarse al contenedor.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

align-items — la mitad del eje de bloque de esta abreviatura.
justify-items — la mitad del eje en línea de esta abreviatura.
grid — el diseño donde place-items es más útil.
justify-content — lo que se debe usar en Flexbox.

Práctica

¿Qué hace la propiedad 'place-items' en CSS?

Define el justify-self y align-self predeterminados para todos los elementos de la caja.Cambia el color de todos los elementos de la caja.Controla el espacio entre las celdas de la cuadrícula CSS.Combina dos propiedades separadas en una sola propiedad abreviada.Define el z-index para todos los elementos de la caja.