Gap
The CSS gap property specifies the spacing between rows and columns or between items in a layout container.
Tiny CSS Projects
The CSS gap property is a shorthand property that sets the spacing between rows and columns in a grid or other layout.
- How it is used
- Adds consistent space between grid tracks or flex items in cards, description lists, buttons, and responsive layouts.
- How deep it goes
- Defines the shorthand, value order, defaults, and outer-edge behavior, then applies it in grid and flex examples.
- Examples
- Uses 20-pixel grid gutters, one-rem card spacing, 12-pixel profile-statistic spacing, and a one-character button icon gap.
- What you can do after
- Apply it via CSS to space grid or flex contents without adding space at the container’s outer edges.
CSS in Depth, Second Edition
The CSS gap property specifies the spacing between rows and columns in layout containers such as flex and grid containers.
- How it is used
- Spaces flex and grid items while keeping the layout container responsible for consistent gutters.
- How deep it goes
- Explains single- and two-value spacing, unit choices, reuse, and interaction with margins, without descending into browser layout internals.
- Examples
- Demonstrates navigation menus, responsive navbar spacing, flex tile rows, and a six-item grid.
- What you can do after
- Apply it in CSS to build consistent gutters in flex and grid layouts and choose suitable spacing units.
Related concepts
- flexboxused by · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- row-gapuses · The CSS row-gap property specifies the space between rows in a grid or other layout container.
- @propertykind of · The CSS @property at-rule registers a custom property by defining its syntax, inheritance behavior, and initial value.
- margin propertycontrasts with · The CSS margin property specifies the outer space around an element’s border, separating it from neighboring content.
- column-gapuses · The CSS column-gap property specifies the space between columns in a layout.
- flex containerconfigures · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.