CSS Gap Property Overview

Overview

This lecture explains the CSS gap property, which sets space between rows and columns in multi-column, flex, and grid containers, including syntax, behavior, and usage examples.

What is the CSS gap Property?

• The gap property is a CSS shorthand that sets spacing (gutters) between rows and columns in containers.
• It is widely supported across browsers and has been standard since October 2017.
• Applicable to grid, flexbox, and multi-column layout containers.

Syntax and Values

• Syntax: gap: <row-gap> <column-gap>?; where the second value is optional.
• If only one value is given, it applies to both rows and columns.
• Accepts <length> (e.g., px, em, cm) or <percentage> values.
• Supports global values: inherit, initial, revert, unset.
• Example usages:
  • gap: 0;
  • gap: 10px 20px;
  • gap: 1em;
  • gap: 10%;
  • gap: calc(20px + 10%);

How gap Works in Layouts

• Creates empty space of defined size (width or height) between items, similar to inserting an empty track or item.
• For grid: first value sets row gutters, second value sets column gutters.
• For flex: first value is gap between lines (wraps), second (if present) is between items within a line; meaning changes with flex-direction.
• For multi-column: value sets space between text columns (add rule lines using column-rule-style).

Key Behaviors

• Percentage values are based on the content box of the container.
• When container size is explicit, percentage gaps are consistent in grid and flex layouts.
• If container size is implicit, grid and flex layouts handle percentage gaps differently:
  • Grid: gap may cause overflow.
  • Flex: percentage gaps may resolve as zero.
• Margins, padding, and alignment can make visible gaps larger than gap value itself.
• Legacy grid-gap property is still accepted for compatibility.

Examples

• To set a 20px row gap and 5px column gap in a grid or flex container: gap: 20px 5px;
• For a three-column text layout:
  • .content-box { column-count: 3; gap: 40px; }
• For percentage-based gaps in fixed-size containers: gap: 12.5% 0;

Key Terms & Definitions

• gap — CSS property setting horizontal and vertical space between rows and columns inside layout containers.
• gutter — The space created by the gap property.
• row-gap — CSS property controlling spacing between rows.
• column-gap — CSS property controlling spacing between columns.
• shorthand property — A CSS property that sets values for multiple related properties.

Action Items / Next Steps

• Practice writing CSS using the gap property in grid, flex, and multi-column layouts.
• Experiment with <length> and <percentage> values and observe their effects with explicit and implicit container sizes.
• Review related properties: row-gap, column-gap, and column-rule-style.