Tailwind CSS - Grid Auto Flow

Previous
Quiz
Next

Tailwind CSS Grid Auto Flow is a utility class specifying the automatic alignment of an element in a grid layout.

Tailwind CSS Grid Auto Flow Classes

The following is the list of Tailwind CSS Grid Auto Flow classes that define how elements in a grid are auto-placed.

Class CSS Properties
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;

Functionality of Tailwind CSS Grid Auto Flow Classes

  • grid-flow-row: This class allows an element to be placed within rows while ensuring to fill each row before moving to the next.
  • grid-flow-col: This class allows an element to be placed within columns while ensuring to fill each column before moving to the next.
  • grid-flow-dense: This class is used to fill gaps earlier with smaller items if available.
  • grid-flow-row-dense: This class combines row flow with dense packing.
  • grid-flow-col-dense: This class combines column flow with dense packing.

Tailwind CSS Grid Auto Flow Classes Examples

The following examples will illustrate the Tailwind CSS Grid Auto Flow class utility.

Auto arranging grid elements in Rows

The row-span-* utility is used to automatically place elements within rows, as demonstrated in the example below.

Example

<!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>

Auto arranging grid elements in Columns

The col-span-* utility is used to automatically place elements within columns, as demonstrated in the example below.

Example

<!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>

Dense packing with Row flow

The grid-flow-row-dense utility allows automatic dense packing with row flow, as demonstrated in the example below.

Example

<!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>

Dense packing with Column flow

The grid-flow-column-dense utility allows automatic dense packing with column flow, as demonstrated in the example below.

Example

<!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>
Print Page
Previous
Next