CSS gap

The gap property in CSS is used to create space between grid or flex items. It is similar to the margin property, but it only affects the space between items, not between an item and its container. The gap property is also known as grid-gap or row-gap and column-gap in grid layouts.

Let's see how the gap property works with a simple example:

Result:

Item 1

Item 2

Item 3


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

.item {
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

In this example, we have a grid container with three grid items. The gap: 20px; property creates a 20px gap between each item in the grid container, both horizontally and vertically.

The gap property can also be used in flex layouts. Let's see an example:

Result:

Item 1

Item 2

Item 3


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

.flex-item {
  background-color: lightgreen;
  padding: 10px;
  text-align: center;
}

In this example, we have a flex container with three flex items. The gap: 20px; property creates a 20px gap between each item in the flex container.

Overall, the gap property provides a convenient way to add space between grid or flex items without the need for extra margins or padding. It can help create visually appealing layouts with consistent spacing between elements.