Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Grid Auto Flow

  • Last Updated : 08 Feb, 2021

This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS grid-auto-flow property and it is used to specify how auto-placed items get flowed into the grid items using Tailwind CSS. 

Grid Auto Flow:

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

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




<!DOCTYPE html> 
<html>
  
<head
    <title>Tailwind grid-flow-row Class</title
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<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
    
</html>

Output:

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




<!DOCTYPE html> 
<html>
  
<head
    <title>Tailwind grid-flow-col Class</title
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<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
    
</html>

Output:

grid-flow-row-dense: Specifying that the auto-placement algorithm uses a “dense” packing algorithm for the column.



Syntax:

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

Example:

HTML




<!DOCTYPE html>
<html>
   
<head
    <title>Tailwind grid-flow-row-dense Class</title
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<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
    
</html>

Output:

grid-flow-col-dense:  Specifying that the auto-placement algorithm uses a “dense” packing algorithm for rows.

Syntax:

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

Example:

HTML




<!DOCTYPE html> 
<html>
  
<head
    <title>Tailwind grid-flow-col-dense Class</title
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<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
    
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :