Layout Utilities

Flexbox, grid, positioning, and display utilities for building responsive layouts.

Display

Control the display property of elements.

Display Classes

block → display: block
inline-block → display: inline-block
inline → display: inline
flex → display: flex
inline-flex → display: inline-flex
grid → display: grid
hidden → display: none

Responsive Display

md:block → block on medium+
lg:flex → flex on large+
md:hidden → hide on medium+

Flexbox

Build flexible layouts with flexbox utilities.

Flex Direction

Flex Direction

1
2
3
1
2
3

Justify Content

Justify Content

Start
Center
End
Between
Items

Align Items

Align Items

Start
Center
End

Gap

Flex Gap

gap-2
gap-2
gap-4
gap-4
gap-8
gap-8

Grid

Create responsive grid layouts with grid utilities.

Grid Columns

Grid Layout

1
2
3
Responsive
Grid
Layout
Demo

Container

Center and constrain content width with the container class.

Container

Centered Container

Content is centered and has max-width constraints.

Common Patterns

Navbar Layout

Flex Navbar

Card Grid

Responsive Card Grid

Card 1

Content here

Card 2

Content here

Card 3

Content here