Tailwind CSS - 网格自动排版
Tailwind CSS rid-auto-flow 网格自动排版 是一个实用类，用于指定网格布局中元素的自动对齐方式。
Tailwind CSS rid-auto-flow 网格自动排版类
以下是 Tailwind CSS 网格自动排版 类的列表，这些类定义了网格中元素的自动放置方式。
| 类 | CSS 属性 |
|---|---|
| grid-flow-row | grid-auto-flow: row; |
| grid-flow-col | grid-auto-flow: column; |
| grid-flow-dense | grid-auto-flow: dense; |
| grid-flow-row-dense | grid-auto-flow: row dense; |
| grid-flow-col-dense | grid-auto-flow: column dense; |
Tailwind CSS 网格自动流类的功能
- grid-flow-row 此类允许将元素放置在行内，并确保在移动到下一行之前填满每一行。
- grid-flow-col 此类允许将元素放置在列内，并确保在移动到下一列之前填满每一列。
- grid-flow-dense 此类用于在可用的情况下使用较小的项目更早地填充间隙。
- grid-flow-row-dense 此类将行流与密集填充相结合。
- grid-flow-col-dense 此类将列流与密集填充相结合。
Tailwind CSS 网格自动流类示例
以下示例将说明 Tailwind CSS网格自动排布类实用程序。
自动按行排列网格元素
row-span-* 实用程序用于自动将元素放置在行内，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Flow Row Class
</h2>
<div class="grid grid-flow-row grid-cols-3 gap-4">
<!--The grid-flow-row class allows an element to be
placed within rows, while ensuring to fullfil
each row before moving to the next-->
<div class="bg-green-600 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="bg-green-400 p-4">Item 3</div>
<div class="bg-green-300 p-4">Item 4</div>
<div class="bg-green-200 p-4">Item 5</div>
<div class="bg-green-100 p-4">Item 6</div>
</div>
</body>
</html>
自动按列排列网格元素
col-span-* 实用程序用于自动将元素放置在列内，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Flow Column Class
</h2>
<div class="grid grid-flow-col grid-rows-3 gap-4">
<!--The grid-flow-column class allows an element to
be placed within columns, while ensuring to fill
each column before moving to the next-->
<div class="bg-green-600 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="bg-green-400 p-4">Item 3</div>
<div class="bg-green-300 p-4">Item 4</div>
<div class="bg-green-200 p-4">Item 5</div>
<div class="bg-green-100 p-4">Item 6</div>
</div>
</body>
</html>
使用行流进行密集填充
grid-flow-row-dense 实用程序允许使用行流自动进行密集填充，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Flow Row Dense Class
</h2>
<!--The grid-flow-row-dense class will fill
all the small gaps with row flow-->
<div class="grid grid-flow-row-dense gap-3">
<div class="col-span-2 bg-green-500 p-2">01</div>
<div class="bg-green-300 p-2">02</div>
<div class="bg-green-300 p-2">03</div>
<div class="bg-green-300 p-2">04</div>
<div class="bg-green-300 p-2">05</div>
</div>
</body>
</html>
基于列流的密集填充
grid-flow-column-dense 实用程序允许自动基于列流进行密集填充，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Flow Column Dense Class
</h2>
<!--The grid-flow-column-dense class will fill
all the small gaps with column flow-->
<div class="grid grid-flow-col-dense gap-3">
<div class="row-span-2 bg-green-500 p-2">01</div>
<div class="bg-green-300 p-2">02</div>
<div class="bg-green-300 p-2">03</div>
<div class="bg-green-300 p-2">04</div>
<div class="bg-green-300 p-2">05</div>
</div>
</body>
</html>
