<pre class="brush: css notranslate"><code><span class="token comment">/ One &lt;length&gt; value /</span> <span class="token property">gap</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 3vmin<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 0.5cm<span class="token punctuation">;</span> <span class="token comment">/ One &lt;percentage&gt; value /</span> <span class="token property">gap</span><span class="token punctuation">:</span> 16%<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token comment">/ Two &lt;length&gt; values /</span> <span class="token property">gap</span><span class="token punctuation">:</span> 20px 10px<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 1em 0.5em<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 3vmin 2vmax<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 0.5cm 2mm<span class="token punctuation">;</span> <span class="token comment">/ One or two &lt;percentage&gt; values /</span> <span class="token property">gap</span><span class="token punctuation">:</span> 16% 100%<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 21px 82%<span class="token punctuation">;</span> <span class="token comment">/ calc() values /</span> <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>10% + 20px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>20px + 10%<span class="token punctuation">)</span> <span class="token function">calc</span><span class="token punctuation">(</span>10% - 5px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">gap</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

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