布局
columns
用于控制元素内列数的实用工具。
| 类 | 样式 |
|---|---|
columns-<数字> | columns: <数字>; |
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-(<自定义属性>) | columns: var(<自定义属性>); |
columns-[<值>] | columns: <值>; |
示例
按数字设置
使用 columns-<数字> 实用工具，如 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-<宽度> 实用工具指定列之间的宽度
<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-[<值>] 语法 来设置columns基于完全自定义的值
<div class="columns-[30vw] ..."> <!-- ... --></div>对于 CSS 变量，您还可以使用 columns-(<自定义属性>) 语法
<div class="columns-(--my-columns) ..."> <!-- ... --></div>这只是 columns-[var(<自定义属性>)] 的简写形式，它会自动为您添加 var() 函数。
响应式设计
前缀一个 columns 实用工具 带有像 sm: 这样的断点变体，以便仅在小 屏幕尺寸及以上时应用该实用工具
调整示例大小以查看预期行为
<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>在 主题文档.
