Atributo CSS grid-gap

Definição e uso

A propriedade grid-gap define o tamanho do espaçamento entre as linhas e colunas na disposição da grade e é uma abreviação dos seguintes atributos:

Atenção:Essa propriedade foi renomeada para gap.

Veja também:

Tutorial de CSS:Disposição de grade CSS

Manual de referência do CSS:Propriedade grip-row-gap

Manual de referência do CSS:Propriedade grip-column-gap

Exemplo

Exemplo 1

Definir o abreviado entre linha e coluna para 50 pixels:

.grid-container {
  grid-gap: 50px;
}

Experimente você mesmo

Exemplo 2

Definir o espaçamento entre linhas para 20 pixels e o espaçamento entre colunas para 50 pixels:

.grid-container {
  grid-gap: 20px 50px;
}

Experimente você mesmo

Sintaxe do CSS

grid-gap: grid-row-gap grid-column-gap;

Valor do atributo

Valor Descrição
grid-row-gap Definir o tamanho do espaçamento entre as linhas na disposição da grade. O valor padrão é 0.
grid-column-gap Definir o tamanho do espaçamento entre colunas. O valor padrão é 0.

Detalhes técnicos

Valor padrão: 0 0
Herança: Não
Produção de animação: Suportado. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Layout de Grade CSS Level 1
Sintaxe do JavaScript: object.style.gridGap="50px 100px"

Suporte do navegador

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44