/* One <length> value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm;  /* One <percentage> value */ gap: 16%; gap: 100%;  /* Two <length> values */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm;  /* One or two <percentage> values */ gap: 16% 100%; gap: 21px 82%;  /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px);  /* Global values */ gap: inherit; gap: initial; gap: revert; gap: unset; 

gap (grid-gap)

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

Syntax

/* One <length> value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm;  /* One <percentage> value */ gap: 16%; gap: 100%;  /* Two <length> values */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm;  /* One or two <percentage> values */ gap: 16% 100%; gap: 21px 82%;  /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px);  /* Global values */ gap: inherit; gap: initial; gap: revert; gap: unset; 

This property is specified as a value for <'row-gap'> followed optionally by a value for <'column-gap'>. If <'column-gap'> is omitted, it's set to the same value as <'row-gap'>.

<'row-gap'> and <'column-gap'> are each specified as a <length> or a <percentage>.

Values

Is the width of the gutter separating the grid lines.

Is the width of the gutter separating the grid lines, relative to the dimension of the element.

Formal definition

Formal syntax

<'row-gap'> <'column-gap'>?

Examples

Flex layout

<div id="flexbox">   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div> </div> 

#flexbox {   display: flex;   flex-wrap: wrap;   width: 300px;   gap: 20px 5px; }  #flexbox > div {   border: 1px solid green;   background-color: lime;   flex: 1 1 auto;   width: 100px;   height: 50px;  } 

Grid layout

<div id="grid">   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div>   <div></div> </div> 

#grid {   display: grid;   height: 200px;   grid-template: repeat(3, 1fr) / repeat(3, 1fr);   gap: 20px 5px; }  #grid > div {   border: 1px solid green;   background-color: lime; } 

Multi-column layout

<p class="content-box">   This is some multi-column text with a 40px column   gap created with the CSS <code>gap</code> property.   Don't you think that's fun and exciting? I sure do! </p> 

.content-box {   column-count: 3;   gap: 40px; } 

Specifications

See also

Last modified: Sep 15, 2021, by MDN contributors