Tailwind CSS - 网格自动行
Tailwind CSS >grid-auto-rows 网格自动行 是一个实用程序类，用于指定隐式创建的网格行的大小。
Tailwind CSS >grid-auto-rows 网格自动行类
以下是用于设置隐式创建的网格行大小的 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>
