A propriedade CSS row-gap

Definição e uso

A propriedade row-gap define o espaço entre as linhas na disposição flexível ou de grade.

A propriedade row-gap foi renomeada para grid-row-gap.

Veja também:

Tutorial CSSDisposição de grade CSS

Tutorial CSSDisposição flexível CSS

Manual CSSPropriedade gap

Manual CSSPropriedade column-gap

Exemplo

Exemplo 1

Defina o espaço de 50 pixels entre as linhas da grade:

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

Experimente você mesmo

Exemplo 2: Disposição flexível

Defina o espaçamento entre as linhas na disposição flexível para 70px:

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

Experimente você mesmo

Sintaxe CSS

row-gap: length|normal|initial|inherit;
Valor Descrição
length Defina o comprimento específico ou o valor percentual do espaço entre as linhas.
normal Valor padrão. Define o espaço normal entre as linhas.
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
Herança: não
Produção de animação: Suportado. Veja as propriedades separadas. Veja em:Propriedades relacionadas a animação.
Versão: Módulo de Alinhamento de Caixa CSS Nível 3
Sintaxe do JavaScript: object.style.rowGap="50px"

Suporte do navegador

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

layout Chrome IE / Edge Firefox Safari Opera
dentro da grade 66 16 61 12 53
dentro da caixa elástica 84 84 63 14.1 70