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>

列印頁面