Propiedad CSS place-items

La propiedad CSS place-items es una abreviatura de las siguientes propiedades:

Estas propiedades se utilizan principalmente con diseños de Grid y elementos posicionados absolutamente. Ten en cuenta que place-items se ignora en los diseños Flexbox y no afecta a las cajas de nivel de bloque estándar ni a las celdas de tabla.

INFO

La propiedad place-items se comporta de manera diferente según el contexto del usuario.

Lee sobre el comportamiento de la propiedad place-items en diferentes contextos a continuación.

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

Sintaxis

Sintaxis de CSS place-items

css

place-items: <align-items> [ / <justify-items> ]?;
/* Expanded values */
place-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;

Nota: Al usar un solo valor, se aplica a ambos ejes. Al usar dos valores separados por una barra diagonal (/), el primer valor establece align-items y el segundo establece justify-items.

Ejemplo de la propiedad place-items:

Ejemplo de código CSS place-items

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: flex-end;
        background-color: #ccc;
        display: grid;
      }
      .grid {
        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: flex-end</h3>
    <div id="container" class="grid">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

SS place-items another

Ejemplo de la propiedad place-items con el valor "center":

Otro ejemplo de código CSS place-items

html

<!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>

Try it Yourself »

Valores

Valor	Descripción
auto	Si la caja no tiene padre o está posicionada absolutamente, el valor "auto" equivale a "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 posicionados absolutamente, este valor se comporta como "start" en cajas reemplazadas posicionadas absolutamente, y como stretch en todas las demás cajas posicionadas absolutamente. - 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	Todos los elementos se posicionan unos contra otros en el borde inicial (izquierdo) del contenedor.
end	Todos los elementos se posicionan unos contra otros en el borde final (derecho) del contenedor.
flex-start	Los elementos se colocan al principio del contenedor.
flex-end	Los elementos se colocan al final del contenedor.
self-start	Se permite que el elemento se coloque en el borde del contenedor según su propio lado inicial.
self-end	Se permite que el elemento se coloque en el borde del contenedor según su propio lado final.
center	Los elementos se posicionan unos junto a otros hacia el centro del contenedor.
left	Los elementos se colocan unos junto a otros 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 unos junto a otros 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 a 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.

Práctica

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

Define justify-self y align-self predeterminados para todos los elementos de la caja.Cambia el color de todos los elementos en 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.

Propiedad CSS place-items ​

Sintaxis ​

Ejemplo de la propiedad place-items: ​

Resultado ​

Ejemplo de la propiedad place-items con el valor "center": ​

Valores ​