1. 布局
  2. columns

布局

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) */

示例(Examples)

¥Examples

按数字设置(Setting by number)

¥Setting by number

使用 columns-<number> 工具(如 columns-3)设置应为元素内的内容创建的列数:

¥Use columns-<number> utilities like columns-3 to set the number of columns that should be created for the content within an element:

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

列宽将自动调整以适应指定的列数。

¥The column width will automatically adjust to accommodate the specified number of columns.

按宽度设置(Setting by width)

¥Setting by width

使用 columns-xscolumns-sm 等工具为元素内的内容设置理想的列宽:

¥Use utilities like columns-xs and columns-sm to set the ideal column width for the content within an element:

调整示例大小以查看预期行为

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

设置列宽时,列数会自动调整以确保它们不会太窄。

¥When setting the column width, the number of columns automatically adjusts to ensure they don't get too narrow.

设置列间距(Setting the column gap)

¥Setting the column gap

使用 gap-<width> 工具指定列之间的宽度:

¥Use the gap-<width> utilities to specify the width between columns:

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

了解有关在 间隙文档 中间隙工具的更多信息。

¥Learn more about the gap utilities in the gap documentation.

使用自定义值(Using a custom value)

¥Using a custom value

使用 columns-[<value>] 语法 根据完全自定义的值设置 columns

<div class="columns-[30vw] ...">
<!-- ... -->
</div>

对于 CSS 变量,还可以使用 columns-(<custom-property>) 语法:

<div class="columns-(--my-columns) ...">
<!-- ... -->
</div>

这只是简写,用于 columns-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

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>

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --container-* 主题变量来自定义项目中的 fixed-width column 工具:

@theme {
--container-4xs: 14rem;
}

现在 columns-4xs 工具可用于你的标记:

<div class="columns-4xs">
<!-- ... -->
</div>

在此详细了解如何自定义主题: 主题文档

TailwindCSS v4.0 中文网 - 粤ICP备13048890号