Tailwind CSS - 网格自动列

Tailwind CSS 网格自动列 是一个实用程序类，用于指定隐式创建的网格列的大小。

Tailwind CSS 网格自动列类

以下是用于设置隐式创建的网格列大小的 Tailwind CSS 网格自动列 类列表。

类	CSS 属性
auto-cols-auto	grid-auto-columns: auto;
auto-cols-min	grid-auto-columns: min-content;
auto-cols-max	grid-auto-columns: max-content;
auto-cols-fr	grid-auto-columns: minmax(0, 1fr);

Tailwind CSS 网格自动列类的功能

auto-cols-auto: 将网格列的宽度设置为其内容的宽度。
auto-cols-min: 将网格列的宽度设置为适应其内容所需的最小宽度。
auto-cols-max: 将网格列的宽度设置为适应其内容所需的最大宽度。
auto-cols-fr 根据可用空间的相等分数设置列宽。

Tailwind CSS 网格自动列类示例

以下示例将说明 Tailwind CSS 网格自动列类实用程序。

调整自动创建的网格列大小

auto-cols-auto 实用程序用于自动调整显式创建的网格列的大小，如下面的示例所示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols Auto Class
    </h2>
    <div class="grid grid-flow-col auto-cols-auto gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

最小化自动创建的网格列

auto-cols-min 实用程序用于自动调整显式创建的网格列的大小，如下面的示例所示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols min Class
    </h2>
    
    <!--The auto-cols-min class minimizes the width of 
           automatically created grid columns to fit their content.-->
    
    <div class="grid grid-flow-col auto-cols-min gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

最大化自动创建的网格列

auto-cols-max 实用程序用于自动调整显式创建的网格列的大小，如下面的示例所示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols max Class
    </h2>
    
    <!--The auto-cols-max class maximize the width of 
           automatically created grid columns to fit their content.-->
    
    <div class="grid grid-flow-col auto-cols-max gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

将自动创建的网格列分成分数

auto-cols-fr 实用程序用于自动调整显式创建的网格列的大小，如下面的示例所示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols Fr Class
    </h2>
    
    <!--The auto-cols-fr class equally fraction the
           available space between grid columns-->
    
    <div class="grid grid-flow-col auto-cols-fr gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

打印页面