Grid Auto Flow In Tailwind Css
This article aims to elaborate on Tailwind grid auto flow property with examples. The purpose of this class is to control the placement of grid items that are not explicitly placed by a grid-row or grid-column.
It is important to know that when we use tailwind grid auto flow to set the placement of grid items, the grid container will calculate the amount of available space for the grid, as well as the size of each grid item, and will then place the items accordingly.
Tailwind Grid Auto Flow Classes
| Classes | Overview |
| grid-flow-row | This utility class allows you to set the placement of grid items to fill rows from left to right before moving on to the next row. |
| grid-flow-col | Grid items are placed from top to bottom before moving on to the next column. |
| grid-flow-dense | When this class is applied to a grid container, it enables the dense packing algorithm for grid items. This allows grid items to be placed into empty cells even if doing so creates holes in the grid. |
| grid-flow-row-dense | Grid items are packed densely using the dense packing algorithm and are placed from left to right before moving on to the next row. In Tailwind, the grid-flow-row-dense utility class is a combination of the grid-flow-row and grid-flow-dense classes. |
| grid-flow-col-dense | Grid items are packed densely and are placed from top to bottom before moving on to the next column. This utility class combines grid-flow-col and grid-flow-dense classes in Tailwind. |
Tailwind Grid-flow-row
Tailwind grid-flow-row class is used to create a grid layout where items flow in rows.
The grid-flow-row class, on the other hand, arranges items in rows, which can be useful in certain situations, such as when you want to create a horizontal scrollable list.
Syntax
<element class="grid-flow-row"> Contents... </element>
This example focuses on the usage of the grid-flow-row class in Tailwind:
Example:
Tailwind grid-flow-col
Tailwind grid-flow-col class is used to create a grid layout where items flow in columns.
The grid-flow-col class, on the other hand, arranges items in columns, which is the more common layout for grids.
Syntax
<element class="grid-flow-col"> Contents... </element>
For this example, let’s consider the grid-flow-col class in Tailwind:
Example:
Tailwind Grid-flow-dense
The grid-flow-dense class is used to create a grid layout where items are arranged in a dense or compact manner.
In some cases, you may want to create a grid layout where items are arranged closer together to reduce whitespace and create a more compact design.
Syntax
<element class="grid-flow-dense"> Contents... </element>
In this example, we are going to make use of grid-flow-dense class in Tailwind:
Example:
Tailwind Grid-flow-row-dense
The grid-flow-row-dense class is used to create a grid layout where items are arranged in a dense or compact manner, and flow in rows.
Syntax
<element class="grid-flow-row-dense"> Contents... </element>
This example portrays the application of grid-flow-row-dense class in Tailwind:
Example:
Tailwind grid-flow-col-dense
Tailwind grid-flow-col-dense class is used to create a grid layout where items are arranged in a dense or compact manner, and flow in columns.
Syntax
<element class="grid-flow-col-dense"> Contents... </element>
The following example showcases the execution of the grid-flow-col-dense class in Tailwind:
