Diseño
columns
Utilidades para controlar el número de columnas dentro de un elemento.
| Clase | Estilos |
|---|---|
columns-<number> | columns: <number>; |
columns-3xs | columns: var(--container-3xs); /* 16rem (256px) */ |
columns-2xs | columns: var(--container-2xs); /* 18rem (288px) */ |
columns-xs | columns: var(--container-xs); /* 20rem (320px) */ |
columns-sm | columns: var(--container-sm); /* 24rem (384px) */ |
columns-md | columns: var(--container-md); /* 28rem (448px) */ |
columns-lg | columns: var(--container-lg); /* 32rem (512px) */ |
columns-xl | columns: var(--container-xl); /* 36rem (576px) */ |
columns-2xl | columns: var(--container-2xl); /* 42rem (672px) */ |
columns-3xl | columns: var(--container-3xl); /* 48rem (768px) */ |
columns-4xl | columns: var(--container-4xl); /* 56rem (896px) */ |
columns-5xl | columns: var(--container-5xl); /* 64rem (1024px) */ |
columns-6xl | columns: var(--container-6xl); /* 72rem (1152px) */ |
columns-7xl | columns: var(--container-7xl); /* 80rem (1280px) */ |
columns-auto | columns: auto; |
columns-(<custom-property>) | columns: var(<custom-property>); |
columns-[<value>] | columns: <value>; |
Ejemplos
Definir por número
Utiliza utilidades columns-<number> como columns-3 para definir 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.
Definir por ancho
Utiliza utilidades como columns-xs y columns-sm para definir el ancho ideal de columna para el contenido dentro de un elemento:
Cambia el tamaño del 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 sean demasiado estrechas.
Definir la separación de columnas (gap)
Utiliza las utilidades gap-<width> para especificar el ancho entre las 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 separación en la documentación de gap.
Usar un valor personalizado
Usa la sintaxis columns-[<value>] para establecer el/la columns basándose 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 añade la función var() por ti automáticamente.
Diseño responsivo
Antepone a la utilidad columns el prefijo de una variante de punto de ruptura como sm: para aplicar la utilidad únicamente en tamaños de pantalla pequeño y superiores:
Cambia el tamaño del 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>Obtén más información sobre el uso de variantes en la documentación de variantes.
Personalizar el tema
Usa las variables de tema --container-* para personalizar las utilidades de columna de ancho fijo en tu proyecto:
@theme { --container-4xs: 14rem; }Ahora se puede usar la utilidad columns-4xs en tu marcado:
<div class="columns-4xs"> <!-- ... --></div>Obtén más información sobre cómo personalizar tu tema en la documentación del tema.