Tailwind CSS Grid Auto Flow - GeeksforGeeks

Tailwind CSS Grid Auto Flow

Last Updated : 23 Oct, 2026

Tailwind CSS provides utility classes for controlling how auto-placed items are flowed within a grid. These utilities are an alternative to the CSS grid-auto-flow property and allow you to control the auto-placement algorithm using utility classes.

Grid Auto Flow

  • grid-flow-row
  • grid-flow-col
  • grid-flow-dense
  • grid-flow-row-dense
  • grid-flow-col-dense

1. grid-flow-row:

Auto-placement algorithm place the items by filling each row in turn, adding new rows as necessary.

Syntax:

<element class="grid-flow-row"> Contents... </element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html> 
<html>

<head> 
    <title>Tailwind grid-flow-row Class</title> 
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head> 

<!--Driver Code Ends-->

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 

    <b>Tailwind CSS grid-flow-row Class</b> 

    <div class = "m-8 grid grid-flow-row gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 

<!--Driver Code Starts-->
  
</html>  
<!--Driver Code Ends-->

2. grid-flow-col:

Auto-placement algorithm place the items by filling each column in turn, adding new columns as necessary.

Syntax:

<element class="grid-flow-col"> Contents... </element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html> 
<html>

<head> 
    <title>Tailwind grid-flow-col Class</title> 
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head> 

<!--Driver Code Ends-->

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 

    <b>Tailwind CSS grid-flow-col Class</b> 

    <div class = "m-8 grid grid-flow-col gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 

<!--Driver Code Starts-->
  
</html>  
<!--Driver Code Ends-->

3. grid-flow-dense:

The grid-flow-dense utility uses a dense packing algorithm when automatically placing grid items. It attempts to fill earlier available spaces in the grid before placing items in later positions.

Syntax:

<element class="grid-flow-dense">Contents...</element>
HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS grid-flow-dense Class</title>

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<!--Driver Code Ends-->

<body class="text-center">

    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <b>Tailwind CSS grid-flow-dense Class</b>

    <div class="m-8 grid grid-cols-3 grid-flow-dense gap-1">

        <div class="bg-green-300 rounded-lg h-12 col-span-2">
            1
        </div>

        <div class="bg-green-500 rounded-lg h-12">
            2
        </div>

        <div class="bg-green-300 rounded-lg h-12">
            3
        </div>

        <div class="bg-green-500 rounded-lg h-12">
            4
        </div>

        <div class="bg-green-300 rounded-lg h-12 col-span-2">
            5
        </div>

    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

4. grid-flow-row-dense:

Uses a dense packing algorithm while placing items by rows.

Syntax:

<element class="grid-flow-row-dense"> Contents... </element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
 
<head> 
    <title>Tailwind grid-flow-row-dense Class</title> 
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> 
</head> 

<!--Driver Code Ends-->

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 

    <b>Tailwind CSS grid-flow-row-dense Class</b> 

    <div class = "m-8 grid grid-flow-row-dense gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 

<!--Driver Code Starts-->
  
</html>  
<!--Driver Code Ends-->

5. grid-flow-col-dense:

Uses a dense packing algorithm while placing items by columns.

Syntax:

<element class="grid-flow-col-dense">..</element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html> 
<html>

<head> 
    <title>Tailwind grid-flow-col-dense Class</title> 
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> 
</head> 

<!--Driver Code Ends-->

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 

    <b>Tailwind CSS grid-flow-col-dense Class</b> 

    <div class = "m-8 grid grid-flow-col-dense gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 

<!--Driver Code Starts-->
  
</html>  
<!--Driver Code Ends-->
Comment

Explore