Tailwind CSS - 列

Tailwind CSS 的 **Column** 实用程序用于控制元素内的列数。向元素添加 Column 实用程序无需为列生成编写自定义 CSS 代码。

Tailwind CSS 的列类会自动调整宽度以适应指定的列数。甚至，我们也可以通过选择理想的宽度来调整它。

语法

<element class="columns-*"></element>

Tailwind CSS 列类

下面提到的类可用于控制列布局。

类	CSS 属性
columns-*	columns: *;
columns-auto	columns: auto;
columns-{3xs-xs}	columns: {16-20rem};
columns-sm	columns: 24rem;;
columns-md	columns: 28rem;
columns-lg	columns: 32rem;
columns-{xl-7xl}	columns: {36rem-80rem};

Tailwind CSS 列类的功能

columns-*：Tailwind CSS Columns-{*} 类表示元素内的 **列数**。范围从 **1 到 12**。
columns-{3xs-xs}：Tailwind CSS Columns-{3xs-xs} 类表示 **超小** 列，范围从 3xs 到 xs，宽度范围从 **16 到 18rem**。
Columns-{xl-7xl}：Tailwind CSS Columns-{xl-7xl} 类表示 **超大** 列，范围从 xl 到 7xl，宽度范围从 **36 到 80 rem**。

Tailwind CSS 列示例

下面的示例将说明 Tailwind CSS 列类。

根据列数添加

以下示例说明了 **Tailwind CSS Columns-*** 类的用法，该类具有 **三** 个列数，这将在元素内创建三个列。

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS Columns Class
    </p>
    <p>Tailwind CSS Columns-* Class</p>
    <div class="columns-3 gap-6 space-y-4">
        <img class="w-full aspect-video" src=
"https://tutorialspoint.com/html/images/html-mini-logo.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.com/html/images/html.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.com/html/images/html-mini-logo.jpg" />

        <img class="w-full aspect-auto" src=
"https://tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.com/html/images/html-mini-logo.jpg" />
    </div>
</body>
</html>

基于宽度的 Tailwind CSS 列类

以下示例说明了 **Tailwind CSS Columns-3xs** 类的用法，它将根据屏幕尺寸对齐元素。

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS Columns Class
    </p>
    <p>Tailwind CSS Columns-* Class</p>
    <div class="columns-3xs space-y-4">
        <img class="w-full aspect-video" src=
"https://tutorialspoint.com/html/images/html-mini-logo.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.com/html/images/html.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.com/html/images/html-mini-logo.jpg" />
             
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.com/html/images/html-mini-logo.jpg" />
             
    </div>
</body>

</html>

打印页面