gap#

#Introduction

The gap CSS shorthand property sets the gaps (gutters) between rows and columns in flexible box layout and grid layout.

This property is a shorthand for the following CSS properties: row-gap and column-gap, 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>.

#Examples

css-apisrc/gap/App.tsx

Preview

#Syntax

/* One <length> value */
gap: 20px;
gap: 1em;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

#Values

• <length>

  <length> is the width of the gutter in flexible box layout or grid layout.

• <percentage>

  <percentage> is the width of the gutter separating the lines, relative to the dimension of the element.

#Formal definition

#Formal syntax

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

<row-gap> = <length-percentage [0,∞]>

<column-gap> = <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

#Compatibility