Lzh on GitHub

columns

控制元素内列数的工具类。

快速参考

类名样式
columns-<number>columns: <number>;
columns-3xscolumns: var(--container-3xs); /* 16rem (256px) */
columns-2xscolumns: var(--container-2xs); /* 18rem (288px) */
columns-xscolumns: var(--container-xs); /* 20rem (320px) */
columns-smcolumns: var(--container-sm); /* 24rem (384px) */
columns-mdcolumns: var(--container-md); /* 28rem (448px) */
columns-lgcolumns: var(--container-lg); /* 32rem (512px) */
columns-xlcolumns: var(--container-xl); /* 36rem (576px) */
columns-2xlcolumns: var(--container-2xl); /* 42rem (672px) */
columns-3xlcolumns: var(--container-3xl); /* 48rem (768px) */
更多...

示例

按数字设置

使用 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() 函数。

响应式设计

为 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>

在 主题文档 中了解更多关于自定义主题的信息。