Tailwind CSS - 网格自动行

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

Tailwind CSS 网格自动行类

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

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

Tailwind CSS 网格自动行类的功能

auto-rows-auto:此类用于将网格行的高度设置为其内容的高度。
auto-rows-min:此类用于将网格行的高度设置为适应其内容所需的最小高度。
auto-rows-max:此类用于将网格行的高度设置为适应其内容所需的最大高度。
auto-rows-fr 此类用于根据可用空间的相等比例设置行高。

Tailwind CSS 网格自动行类示例

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

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

auto-rows-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 Rows Auto Class
    </h2>
    <div class="grid grid-cols-3 auto-rows-auto gap-4">
        <div class="bg-green-200 p-4">Item 1</div>
        <div class="bg-green-300 p-4">Item 2 with more content</div>
        <div class="bg-green-400 p-4">Item 3</div>
        <div class="bg-green-500 p-4">
            Item 4 with even more content than Item 2
        </div>
    </div>
</body>

</html>

自动创建的网格行高度的分数

auto-rows-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 Rows Fr Class
    </h2>
    <div class="grid grid-cols-3 auto-rows-fr gap-4">
        <div class="bg-green-200 p-4">Item 1</div>
        <div class="bg-green-300 p-4">Item 2 with more content</div>
        <div class="bg-green-400 p-4">Item 3</div>
        <div class="bg-green-500 p-4">
            Item 4 with even more content than Item 2
        </div>
    </div>
</body>

</html>

打印页面