Columnas
Break

<< Class container gap >>

Una de las utilidades principales que tiene Tailwind para controlar el número de columnas de un elemento es la clase .columns-X

<div class="columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

En el ejemplo anterior, me estoy creando X imágenes divididas en 3 columnas. La clase aspect que vemos nos va a permitir controlar el aspecto de dicho elemento, pudiendo darle un ratio como aspect-3/2 y ajustarlo a las dimensiones de la imagen/vídeo a visualizar.

Si usamos por ejemplos las clases como .columns-xs y .columns-sm para establecer el ancho de columna para el contenido dentro de un elemento, con el número de columnas automáticamente se ajusta a ese valor.

<div class="columns-3xs ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

 Podemos separar cada columna con un gap, para ello, usaremos la clase .gap-x

<div class="gap-8 columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

Break

Tenemos las clases break-after y break-before que nos van a permitir controlar cómo una columna se baja(break-after-column) e incluso en función del tamaño de la resolución. (md:break-after-auto)

<div class="columns-2">
  <p>Well, let me tell you something, ...</p>
  <p class="break-before-column">Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>

Con el prefijo md al break-before, lo que hacemos es que se aplicará el break sólo a las dimensiones md e inferiores.

<div class="break-before-column md:break-before-auto ...">
  <!-- ... -->
</div>
Apartados de esta sección
gap
padding
margin

<< Class container gap >>