gap

Definition

The gap CSS property is used in grid layouts and flexbox layouts to set the spacing between grid or flex items. It specifies the size of the gap between rows and columns in a grid container or between flex items in a flex container.

The gap property is a shorthand for both row-gap (for vertical spacing) and column-gap (for horizontal spacing) properties. It accepts one or two values, representing the gap size in pixels, percentages, or other length units.

Here’s an example using grid layout:

.grid-container {
  display: grid;
  gap: 20px;
}

In this example, the gap: 20px; rule sets a 20-pixel gap between rows and columns within a grid container. This creates consistent spacing between the grid items.

Similarly, in a flexbox layout, the gap property can be used:

.flex-container {
  display: flex;
  gap: 10px;
}

In this case, the gap: 10px; rule sets a 10-pixel gap between flex items within a flex container.

The gap property provides a convenient way to add consistent spacing between grid or flex items, helping to create visually pleasing and well-organized layouts.