columns

Ejemplos

Establecer por número

Usa utilidades columns-<number> como columns-3 para establecer el número de columnas que se deben crear para el contenido dentro de un elemento:

<div class="columns-3 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

El ancho de la columna se ajustará automáticamente para adaptarse al número especificado de columnas.

Establecer por ancho

Usa utilidades como columns-xs y columns-sm para establecer el ancho de columna ideal para el contenido dentro de un elemento:

Redimensiona el ejemplo para ver el comportamiento esperado

<div class="columns-3xs ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

Al establecer el ancho de la columna, el número de columnas se ajusta automáticamente para garantizar que no se estrechen demasiado.

Estableciendo el espaciado entre columnas

Usa las utilidades gap-<width> para especificar el ancho entre columnas:

<div class="columns-3 gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

Obtén más información sobre las utilidades de gap en la documentación de gap.

Usando un valor personalizado

Usa la sintaxis columns-[<value>] para establecer el columns basado en un valor completamente personalizado:

<div class="columns-[30vw] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis columns-(<custom-property>) :

<div class="columns-(--my-columns) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para columns-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad columns con una variante de breakpoint como sm: para aplicar la utilidad solo en tamaños de pantalla small y superiores:

Redimensiona el ejemplo para ver el comportamiento esperado

<div class="columns-2 gap-4 sm:columns-3 sm:gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>

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

Personalizando tu tema

Usa las variables de tema --container-* para personalizar las utilidades fixed-width column en tu proyecto:

@theme {
  --container-4xs: 14rem; 
}

Ahora la utilidad columns-4xs puede ser usada en tu marcado:

<div class="columns-4xs">
  <!-- ... -->
</div>

Aprende más sobre la personalización de tu tema en la documentación del tema.