レイアウト
columns
要素内の列数を制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
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>ギャップユーティリティの詳細については、ギャップに関するドキュメントをご覧ください。
カスタム値の使用
以下を使用します 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-* テーマ変数を使用して、以下をカスタマイズします固定幅の列 プロジェクト内のユーティリティ
@theme { --container-4xs: 14rem; }これで columns-4xs ユーティリティをマークアップで使用できるようになりました
<div class="columns-4xs"> <!-- ... --></div>テーマのカスタマイズの詳細については、 テーマに関するドキュメント.