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）设置元素内内容应分成的列数：

<!-- [!code classes: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 等工具类，为元素内内容设置理想列宽：

<!-- [!code classes:columns-3xs] -->
<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> 工具类指定列与列之间的间距：

<Tr original="Learn more about customizing your theme in the [theme documentation](/4.x/theme#customizing-your-theme).">

了解如何自定义主题，请参阅[主题文档](/4.x/theme#customizing-your-theme)。

</Tr>