Flex & Grid Utilities

Utility classes for quickly creating flex and grid layouts. These utilities simplify common layout patterns by combining multiple Tailwind classes into single, semantic class names.

Preview

Item 1

Item 2

Item 3

Builder

Example

Layout Type

Direction

Options

Center Gap (gap-4)

Flex Utilities

Grid Utilities

Utility	Tailwind Equivalent	Description
`row`	`flex flex-row`	Displays children in a horizontal row (left to right)
`row-reverse`	`flex flex-row-reverse`	Displays children in a horizontal row in reverse order (right to left)
`column`	`flex flex-col`	Displays children in a vertical column (top to bottom)
`column-reverse`	`flex flex-col-reverse`	Displays children in a vertical column in reverse order (bottom to top)
`wrap`	`flex-wrap`	Allows flex children to wrap to multiple lines (combine with row/column)
`center`	`items-center justify-center`	Centers children both horizontally and vertically

💡 Pro Tips

Section & Card: Both components support flex and grid utilities in their class prop
Responsive: Combine with breakpoint prefixes: column lg:row or grid-1 md:grid-3
Grid Auto-Fit: Use grid-auto-fit for truly responsive layouts that adapt to any screen size
Center: The center utility works with both flex and grid layouts