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>

列印頁面