Tailwind CSS - Grid Row Start/End
Tailwind CSS Grid Row Start/End是一个实用类，用于指定网格行间的排列和大小。
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>
