CSS gap Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS gap property is a relatively new addition to the language, introduced in CSS Grid and Flexbox layouts to control the spacing between grid or flex items. It offers a convenient way to manage the gutters or spacing between elements, allowing web developers to create more responsive and visually appealing layouts. By setting the "gap" property, designers can specify the desired space between rows and columns in grid layouts or between flex items, streamlining the design process and enhancing the overall user experience on websites. This property simplifies the previously complex task of managing spacing in layouts, making it an essential tool for modern web design. Individual properties are: row-gap and column-gap.

Initial value: See individual properties
Applies to: multi-column elements, flex containers, grid containers
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.gap

Interactive Demo

Item One

Item Two

Item Three

Item Four

Item Five

Syntax

gap: <row-gap> <column-gap>

Values

<row-gap>Is the width of the gutter separating the grid lines.
<column-gap>Is the width of the gutter separating the grid lines.

Example

HTML

<div id="grid">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 10px;
}

#grid > div {
  border: 1px dashed blue;
  background-color: #FFF;
}

Result

Editor