place-content

Ejemplos

Centro

Usa place-content-center para agrupar elementos en el centro del eje del bloque:

<div class="grid h-48 grid-cols-2 place-content-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Inicio

Usa place-content-start para agrupar elementos contra el inicio del eje del bloque:

<div class="grid h-48 grid-cols-2 place-content-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Fin

Usa place-content-end para agrupar elementos contra el final del eje del bloque:

<div class="grid h-48 grid-cols-2 place-content-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Espacio entre

Usa place-content-between para distribuir los elementos de la cuadrícula a lo largo del eje del bloque de modo que haya una cantidad igual de espacio entre cada fila en el eje del bloque:

<div class="grid h-48 grid-cols-2 place-content-between gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Espacio alrededor

Usa place-content-around para distribuir los elementos de la cuadrícula de tal manera que haya una cantidad igual de espacio alrededor de cada fila en el eje del bloque:

<div class="grid h-48 grid-cols-2 place-content-around gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Espacio uniforme

Usa place-content-evenly para distribuir los elementos de la cuadrícula de tal manera que estén espaciados uniformemente en el eje del bloque:

<div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Estirar

Usa place-content-stretch para estirar los elementos de la cuadrícula a lo largo de sus áreas de cuadrícula en el eje del bloque:

<div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Diseño Responsive

Prefija una utilidad place-content con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="grid place-content-start md:place-content-center ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.