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; 屬性，並允許網格項從其父網格繼承網格行軌道。

Tailwind CSS 網格模板行類示例

以下示例將說明 Tailwind CSS 網格模板行類實用程式。

定義網格中的行

使用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>

定義子網格

使用grid-rows-subgrid與父項設定的行軌道對齊，如下所示。

示例

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

列印頁面