gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

A propriedade must be provided gap define os espaços (gutters) entre as linhas e colunas. É uma propriedade shorthand para row-gap e column-gap.

Experimente

É importante notar que grid-gap é um pseudônimo para esta propriedade.

Sintaxe

css
/* Um valor de comprimento */
/* Tipo: <length> */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* Um valor de porcentagem */
/* Tipo: <percentage> */
gap: 16%;
gap: 100%;

/* Dois valores de comprimento */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* Um ou dois valores de porcentagem */
gap: 16% 100%;
gap: 21px 82%;

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

/* Valores globais */
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;

Esta propriedade é especificada como um valor para <'row-gap'> seguido opcionalmente por um valor para <'column-gap'>. Se o valor para <'column-gap'> for omitido, este será definido como o mesmo valor de <'row-gap'>.

Os valores de <'row-gap'> e <'column-gap'> são ambos especificados como <length> ou <percentage>.

Valores

<length>

É o comprimento do espaçamento (gutter) que separa as linhas do grid.

<percentage>

É o comprimento do espaçamento (gutter) que separa as linhas do grid, relativo à dimensão do elemento.

Definição formal

Initial valueas each of the properties of the shorthand:
Aplica-se amulti-column elements, flex containers, grid containers
Inheritednão
Computed valueas 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 elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typeas each of the properties of the shorthand:

Sintaxe formal

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

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

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

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

Exemplos

Flex layout

HTML

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

CSS

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

Resultado

Grid layout

HTML

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

CSS

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

Resultado

Layout de múltiplas colunas

HTML

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

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

Resultado

Especificações

Specification
CSS Box Alignment Module Level 3
# gap-shorthand

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
gap
Supported in Flex Layout
Supported in Grid Layout
calc() values
<percentage> values
Supported in Multi-column Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

Veja também