What does the gap property do?

CSSJunior~1 min read

gap sets the spacing between elements in Grid and Flexbox, without adding outer margins to the elements themselves.

Example:

css

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

This will create spacing between elements (both along rows and columns).

Additionally:

javascript

row-gap: 10px;    /* only along rows */
column-gap: 15px; /* only along columns */
gap: 10px 15px;   /* row / column */

Important: gap does not create spacing at the edges of the container, only between elements.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.