The gap property controls the spacing between items in layout systems without placing that spacing on the items themselves. Instead of adding margins on children, it creates a dedicated gap area between adjacent grid tracks or flex items so the spacing is conceptually part of the container’s layout. That makes it easier to maintain consistent gutters: when you change the container’s spacing, you adjust a single value rather than updating margins on every child element.

In practice, gap only has an effect when the container participates in a layout model that understands inter-item gutters (for instance when a container is set to use a grid or flex layout), so it’s tied to how the container is displayed — see display. It is the shorthand relationship to the directional gap properties such as row-gap and column-gap, letting authors think in terms of a two-axis gutter instead of manually managing vertical and horizontal spacing separately.

Using gap changes how space is allocated inside the container: the gap area is considered when computing track sizes and available space, so adding a larger gap can reduce the space available for the items themselves. It does not collapse like margins, and it does not add extra empty space around the outer edges of the container — the gap exists only between items. Because of this separation, gap complements alignment properties; it does not replace alignment or distribution controls such as justify-content or align-items, which still determine how remaining space is positioned relative to item boxes. For cases where you previously relied on per-item margins to space children, replacing those margins with a container-level gap simplifies responsive tweaks and avoids uneven spacing caused by differing child wrappings or order.