Макет
Колонки
Утилиты для управления количеством столбцов внутри элемента.
| Class | Styles |
|---|---|
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>; |
Примеры
Установка по количеству
Используйте утилиты columns-<number> типа columns-3 для установки количества столбцов, которые должны быть созданы для контента внутри элемента:
<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>Ширина столбцов будет автоматически настраиваться для размещения указанного количества столбцов.
Установка по ширине
Используйте утилиты типа columns-xs и columns-sm для установки идеальной ширины столбца для контента внутри элемента:
Измените размер примера, чтобы увидеть ожидаемое поведение
<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>При установке ширины столбца количество столбцов автоматически настраивается, чтобы они не становились слишком узкими.
Установка промежутка между столбцами
Используйте утилиты gap-<width> для указания ширины между столбцами:
<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>Узнайте больше об утилитах gap в документации по gap.
Использование пользовательского значения
Используйте синтаксис columns-[<value>] , чтобы задать columns на основе полностью пользовательского значения:
<div class="columns-[30vw] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: columns-(<custom-property>)
<div class="columns-(--my-columns) ..."> <!-- ... --></div>Это просто сокращение, columns-[var(<custom-property>)] которое автоматически добавляет функцию var().
Адаптивный дизайн
Префикс a columns утилита с вариантом контрольной точки, например sm:, чтобы применить утилиту только при размерах экрана small и выше:
Измените размер примера, чтобы увидеть ожидаемое поведение
<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>Подробнее об использовании вариантов читайте в документации по вариантам.
Кастомизация вашей темы
Используйте переменные темы --container-* для настройки утилит fixed-width column в вашем проекте:
@theme { --container-4xs: 14rem; }Теперь утилиту columns-4xs можно использовать в вашей разметке:
<div class="columns-4xs"> <!-- ... --></div>Подробнее о настройке темы читайте в документации темы.