Tailwind CSS Grid Auto Flow

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:

Output:

👁 Image

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:

Output:

👁 Image

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:

Output:

👁 Image

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:

Output:

👁 Image