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

/* 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

<length>

Is the width of the gutter separating the grid lines.

<percentage>

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

Formal definition

Initial value	as each of the properties of the shorthand:row-gap: normalcolumn-gap: normal
Applies to	multi-column elements, flex containers, grid containers
Inherited	no
Computed value	as each of the properties of the shorthand:row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementscolumn-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type	as each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc();

Formal syntax

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

Examples

Flex layout

HTML

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

CSS

#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;  } 

Result

Grid layout

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 5px; }  #grid > div {   border: 1px solid green;   background-color: lime; } 

Result

Multi-column layout

HTML

<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> 

CSS

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

Result

Specifications

Specification
CSS Box Alignment Module Level 3 # gap-shorthand

See also

Related CSS properties: row-gap, column-gap Grid Layout Guide: Basic concepts of grid layout - Gutters

Last modified: Sep 15, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Русский中文 (简体) Change language