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.tw/html/images/html-mini-logo.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.tw/html/images/html.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.tw/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.tw/html/images/html-mini-logo.jpg" />

        <img class="w-full aspect-auto" src=
"https://tutorialspoint.tw/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.tw/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.tw/html/images/html-mini-logo.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.tw/html/images/html.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.tw/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.tw/html/images/html-mini-logo.jpg" />
             
        <img class="w-full aspect-auto" src=
"https://tutorialspoint.tw/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://tutorialspoint.tw/html/images/html-mini-logo.jpg" />
             
    </div>
</body>

</html>

列印頁面