Atributo gap do CSS

Definição e uso

A propriedade gap define o tamanho do espaço entre as linhas e as colunas no flexbox, grade ou layout de múltiplas colunas. É um atalho para as seguintes propriedades:

Atenção:A propriedade gap foi renomeada de grid-gap.

Veja também:

Tutorial CSSLayout de grade CSS

Tutorial CSSLayout flexível CSS

Tutorial CSSLayout de múltiplas colunas CSS

Manual CSSPropriedade row-gap

Manual CSSPropriedade column-gap

Exemplo

Exemplo 1

Defina o espaçamento entre as linhas e as colunas para 50px:

.grid-container {
  gap: 50px;
}

Experimente você mesmo

Exemplo 2: Layout de grade

Defina o espaçamento entre as linhas para 20px e o espaçamento entre as colunas para 50px no layout de grade:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Experimente você mesmo

Exemplo 3: Layout flexível

Defina o espaçamento entre as linhas para 20px e o espaçamento entre as colunas para 70px no layout flexível:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Experimente você mesmo

Exemplo 4: Layout de múltiplas colunas

Defina o espaçamento entre as colunas em layout de múltiplas colunas para 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Experimente você mesmo

Sintaxe CSS

gap: row-gap column-gap|initial|inherit;
Valor Descrição
row-gap Defina o tamanho do espaço entre as linhas na grade ou no layout flexível.
column-gap Defina o tamanho do espaço entre as colunas em grade, contêiner flexível ou layout de múltiplas colunas.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: normal normal
Herança: Não
Produção de animação: Suportado. Veja as propriedades individuais. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Alinhamento de Caixa CSS Nível 3
Sintaxe JavaScript: object.style.gap="50px 100px"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Layout Chrome IE / Edge Firefox Safari Opera
Na grade 66 16 61 12 53
No contêiner flexível 84 84 63 14.1 70
Em múltiplas colunas 66 16 61 Não suportado 53