Tailwind CSS - 网格模板行

Tailwind CSS 网格模板行是一个实用程序类，用于指定网格布局中行数和大小。

Tailwind CSS 网格模板行类

以下是定义网格布局中行的Tailwind CSS 网格模板行类的列表。

类	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; 属性，并允许网格项从其父网格继承网格行轨道。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 网格模板行类示例

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

定义网格中的行

使用grid-rows-*类创建具有 n 行且大小相同的网格，如下所示。

示例

Open Compiler

<!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>

定义子网格

使用grid-rows-subgrid与父项设置的行轨道对齐，如下所示。

示例

Open Compiler

<!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>

打印页面