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>

打印页面