align-content

Ejemplos

Start

Usa content-start para agrupar filas en un contenedor contra el inicio del eje transversal:

<div class="grid h-56 grid-cols-3 content-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Center

Usa content-center para agrupar filas en un contenedor en el centro del eje transversal:

<div class="grid h-56 grid-cols-3 content-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

End

Usa content-end para agrupar filas en un contenedor contra el final del eje transversal:

<div class="grid h-56 grid-cols-3 content-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Space between

Usa content-between para distribuir filas en un contenedor de manera que haya una cantidad igual de espacio entre cada línea:

<div class="grid h-56 grid-cols-3 content-between gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Space around

Usa content-around para distribuir filas en un contenedor de manera que haya una cantidad igual de espacio alrededor de cada línea:

<div class="grid h-56 grid-cols-3 content-around gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Space evenly

Usa content-evenly para distribuir filas en un contenedor de manera que haya una cantidad igual de espacio alrededor de cada ítem, pero también teniendo en cuenta el doble espacio que normalmente verías entre cada ítem al usar content-around:

<div class="grid h-56 grid-cols-3 content-evenly gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Stretch

Usa content-stretch para permitir que los ítems de contenido llenen el espacio disponible a lo largo del eje transversal del contenedor:

<div class="grid h-56 grid-cols-3 content-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Normal

Usa content-normal para agrupar ítems de contenido en su posición predeterminada como si no se hubiera establecido ningún valor de align-content:

<div class="grid h-56 grid-cols-3 content-normal gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Responsive design

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

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

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