Tailwind CSS - 网格模板行
Tailwind CSS grid-template-rows 网格模板行 是一个实用程序类，用于指定网格布局中行的数量和大小。
Tailwind CSS grid-template-rows 网格模板行类
以下是定义网格布局中行的 Tailwind CSS grid-template-rows 网格模板行 类的列表。
| 类 | CSS 属性 |
|---|---|
| grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); |
| grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); |
| grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); |
| grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); |
| grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); |
| grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); |
| grid-rows-7 | grid-template-rows: repeat(7, minmax(0, 1fr)); |
| grid-rows-8 | grid-template-rows: repeat(8, minmax(0, 1fr)); |
| grid-rows-9 | grid-template-rows: repeat(9, minmax(0, 1fr)); |
| grid-rows-10 | grid-template-rows: repeat(10, minmax(0, 1fr)); |
| grid-rows-11 | grid-template-rows: repeat(11, minmax(0, 1fr)); |
| grid-rows-12 | grid-template-rows: repeat(12, minmax(0, 1fr)); |
| grid-rows-none | grid-template-rows: none; |
| grid-rows-subgrid | grid-template-rows: subgrid; |
Tailwind CSS 网格模板行的功能
- grid-rows-*:此类用于创建具有指定数量、大小相等的行的网格布局，其中 {* 表示行数，范围从 1 到 12。
- grid-rows-none:此类替换 CSS grid-template-rows: none; 属性，用于禁用网格布局的行功能。
- grid-rows-subgrid:此类替换 CSS grid-template-rows: subgrid; 属性，允许网格项从其父网格继承网格行轨道。
Tailwind CSS 网格模板行类示例
以下示例将演示 Tailwind CSS 网格模板 Rows 类实用程序。
定义网格中的行
使用 grid-rows-* 类创建一个包含 n 行且大小相同的网格，如下所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Rows 3
</h2>
<div class="grid grid-rows-3 gap-4">
<div class="bg-green-400 p-4">Row 1</div>
<div class="bg-green-300 p-4">Row 2</div>
<div class="bg-green-200 p-4">Row 3</div>
</div>
</body>
</html>
Defining Subgrid
Use grid-rows-subgrid to align with the row tracks set by the parent item, as demonstrated below.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Rows Subgrid
</h2>
<div class="grid grid-rows-4 gap-4 p-4">
<div class="bg-green-400">1</div>
<div class="bg-green-400">2</div>
<div class="grid grid-rows-subgrid gap-4
row-span-3 bg-green-200 p-4">
<div class="row-start-2 bg-green-300">
Subgrid Item 1
</div>
<div class="bg-green-400">
Subgrid Item 2
</div>
</div>
</div>
</body>
</html>
