Tailwind CSS - 网格自动流

Tailwind CSS 网格自动流是一个实用程序类，用于指定元素在网格布局中的自动对齐方式。

Tailwind CSS 网格自动流类

以下是定义如何在网格中自动放置元素的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>

打印页面