columns
Các utility để kiểm soát số lượng cột trong một phần tử.
| 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>; |
Ví dụ
Thiết lập theo số lượng
Sử dụng các utility columns-<number> như columns-3 để thiết lập số lượng cột sẽ được tạo cho nội dung bên trong một phần tử:
<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>Độ rộng cột sẽ tự động điều chỉnh để phù hợp với số lượng cột đã chỉ định.
Thiết lập theo độ rộng
Sử dụng các utility như columns-xs và columns-sm để thiết lập độ rộng cột lý tưởng cho nội dung bên trong một phần tử:
Resize the example to see the expected behavior
<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>Khi thiết lập độ rộng cột, số lượng cột sẽ tự động điều chỉnh để đảm bảo chúng không quá hẹp.
Thiết lập khoảng cách cột (gap)
Sử dụng các utility gap-<width> để chỉ định độ rộng giữa các cột:
<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>Tìm hiểu thêm về các utility gap trong tài liệu gap.
Sử dụng giá trị tùy chỉnh
Use the columns-[<value>] syntax to set the columns based on a completely custom value:
<div class="columns-[30vw] ..."> <!-- ... --></div>For CSS variables, you can also use the columns-(<custom-property>) syntax:
<div class="columns-(--my-columns) ..."> <!-- ... --></div>This is just a shorthand for columns-[var(<custom-property>)] that adds the var() function for you automatically.
Thiết kế phản hồi
Prefix a columns utility with a breakpoint variant like sm: to only apply the utility at small screen sizes and above:
Resize the example to see the expected behavior
<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>Learn more about using variants in the variants documentation.
Tùy chỉnh theme của bạn
Use the --container-* theme variables to customize the fixed-width column utilities in your project:
@theme { --container-4xs: 14rem; }Now the columns-4xs utility can be used in your markup:
<div class="columns-4xs"> <!-- ... --></div>Learn more about customizing your theme in the theme documentation.