flexbox
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.
gap: <row-gap> <column-gap>Common values
| Value | Effect |
|---|---|
| 0 | No gap between items |
| 1rem | Even 1rem gap on both axes |
| 8px 16px | 8px row gap, 16px column gap |
| clamp(.5rem, 2vw, 1.5rem) | Fluid responsive gap |
Examples
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }Three-column grid with equal spacing
.stack { display: flex; flex-direction: column; gap: 1rem; }Vertical stack with breathing room
.form { display: grid; gap: .5rem 1rem; }Tighter vertical, wider horizontal spacing
Gotcha
gap does not add space outside the container edges; use padding on the parent for that.
Related properties
flex
Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. Controls how the item grows or shrinks to fill the flex container.
grid-template-columns
Defines the number, size, and naming of columns in a grid container. Supports flexible fr units, repeat(), minmax(), and auto-fit/auto-fill for responsive layouts.
justify-content
Aligns flex or grid items along the main axis, distributing extra space between them. It has no effect if the items already fill the container.
margin
Shorthand for setting outer spacing on all four sides of an element. Accepts lengths, percentages, or the auto keyword for horizontal centering.
flex-direction
Sets the main axis of a flex container, deciding whether items lay out horizontally or vertically. It also determines which direction items are reversed if needed.