Layout: flexbox & grid
The two layout engines you'll use in every project — flexbox and grid, each in one line of classes.
Flexbox in one line
Flexbox is your one-dimensional layout engine. Turn it on with `flex`, pick a direction (`flex-row` or `flex-col`), then control spacing along each axis: justify for the main axis and items for the cross axis. Add `gap-*` for consistent spacing between children.
The most common combo: `flex items-center justify-between gap-4` — a horizontal row with vertically centered content, space pushed to the edges, and a 16px gap.
flex
Turns on flexbox (display: flex). The starting point for every flex layout.
flex-row / flex-col
Row = horizontal (default). Col = vertical stack. Add `-reverse` to flip order.
justify-*
Main-axis alignment: start, end, center, between, around, evenly.
items-*
Cross-axis alignment: start, end, center, baseline, stretch.
gap-*
Spacing between children. Uses the spacing scale — gap-4 = 16px.
flex-wrap
Allow items to wrap to the next line instead of squeezing. Pair with wrap-reverse if needed.
In a flex container, `justify-between` does what?
Grid made simple
CSS Grid is for two-dimensional layouts — rows AND columns simultaneously. Tailwind exposes the most-used grid properties: define columns with `grid-cols-*`, make an item span multiple columns with `col-span-*`, and use `gap-*` for consistent gutters.
A responsive card grid is as simple as `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`. The same gap scale works across both flex and grid — one mental model for spacing.
Which utility creates a 4-column grid with 24px gaps?
Display & positioning
Not everything is flex or grid. Tailwind gives you direct control over the display (`block`, `inline`, `inline-block`, `hidden`) and position (`relative`, `absolute`, `fixed`, `sticky`) properties. These are your precision tools.
The `hidden` utility applies `display: none` — completely removes the element from layout. Compare with `invisible` which hides it visually but preserves its space.
| Utility | CSS equivalent | When to use |
|---|---|---|
| block | display: block | Full-width elements like sections |
| inline-block | display: inline-block | Buttons that sit inline with text |
| hidden | display: none | Conditionally hide elements entirely |
| relative | position: relative | Anchor point for absolute children |
| absolute | position: absolute | Overlays, badges, positioned icons |
| fixed | position: fixed | Sticky navbars, floating buttons |
| sticky | position: sticky | Sticky headers inside scroll containers |
In Tailwind, `hidden` does what?