Tailwind CSS - 網格行起始/結束

Tailwind CSS 網格行起始/結束是一個實用程式類，用於指定跨網格行的行的排列和大小。

Tailwind CSS 網格模板行類

以下是定義網格佈局中行排列和大小的Tailwind CSS 網格模板行類的列表。

類	CSS 屬性
row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-2	grid-row: span 2 / span 2;
row-span-3	grid-row: span 3 / span 3;
row-span-4	grid-row: span 4 / span 4;
row-span-5	grid-row: span 5 / span 5;
row-span-6	grid-row: span 6 / span 6;
row-span-7	grid-row: span 7 / span 7;
row-span-8	grid-row: span 8 / span 8;
row-span-9	grid-row: span 9 / span 9;
row-span-10	grid-row: span 10 / span 10;
row-span-11	grid-row: span 11 / span 11;
row-span-12	grid-row: span 12 / span 12;
row-span-full	grid-row: 1 / -1;
row-start-1	grid-row-start: 1;
row-start-2	grid-row-start: 2;
row-start-3	grid-row-start: 3;
row-start-4	grid-row-start: 4;
row-start-5	grid-row-start: 5;
row-start-6	grid-row-start: 6;
row-start-7	grid-row-start: 7;
row-start-8	grid-row-start: 8;
row-start-9	grid-row-start: 9;
row-start-10	grid-row-start: 10;
row-start-11	grid-row-start: 11;
row-start-12	grid-row-start: 12;
row-start-13	grid-row-start: 13;
row-start-auto	grid-row-start: auto;
row-end-1	grid-row-end: 1;
row-end-2	grid-row-end: 2;
row-end-3	grid-row-end: 3;
row-end-4	grid-row-end: 4;
row-end-5	grid-row-end: 5;
row-end-6	grid-row-end: 6;
row-end-7	grid-row-end: 7;
row-end-8	grid-row-end: 8;
row-end-9	grid-row-end: 9;
row-end-10	grid-row-end: 10;
row-end-11	grid-row-end: 11;
row-end-12	grid-row-end: 12;
row-end-13	grid-row-end: 13;
row-end-auto	grid-row-end: auto;

Tailwind CSS 網格行起始和結束的功能

row-auto: 此類替換 CSS grid-row: auto; 屬性。此類允許元素根據其內容自動跨越行數。
row-span-*: 此類用於指定網格佈局中應跨越的行數。{*} 表示列計數範圍為1 到 12。
row-start-*: 此類用於指定元素在網格佈局中行線上的起始位置。{*} 表示此處位置範圍為1 到 13。
row-end-*: 此類用於指定元素在網格佈局中行線上的結束位置。{*} 表示此處位置範圍為1 到 13。

Tailwind CSS 網格行起始和結束類示例

以下示例將說明 Tailwind CSS 網格行起始/結束類實用程式。

網格跨行

以下示例說明了row-span-*類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Row Span Class Example
    </h2>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <div class="bg-red-500 row-span-2 p-4">
            Row Span 2
        </div>
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
    </div>
</body>

</html>

網格起始線

以下示例說明了row-start-*類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Row Start Class Example
    </h2>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <div class="bg-red-500 row-start-2 p-4">
            Row Start 2
        </div>
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
    </div>
</body>

</html>

網格結束線

以下示例說明了row-end-*類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Row End Class Example
    </h2>
    <div class="grid grid-rows-2 grid-flow-col gap-4">
        <div class="bg-red-500 row-start-1 row-end-3 p-4">
            Row End 3
        </div>
        <!--Above row will start from row 1 and will end at row 3-->
        <div class="bg-green-500 p-4">Column 1</div>
        <div class="bg-green-400 p-4">Column 2</div>
        <div class="bg-green-300 p-4">Column 3</div>
        <div class="bg-green-200 p-4">Column 4</div>
    </div>
</body>

</html>

列印頁面