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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

gap: 0;

gap: 10%;

gap: 1em;

gap: 10px 20px;

gap: calc(20px + 10%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

É 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

Veja também