Propriedade CSS grid-row-gap
Aprenda como o CSS grid-row-gap define o espaço entre linhas de grid, com sintaxe, valores, exemplos ao vivo e dicas para usar o alias moderno row-gap.
A propriedade CSS grid-row-gap define o tamanho do espaço (o gutter) entre as linhas de um contêiner grid. Ela insere espaço entre as linhas — nunca antes da primeira linha ou após a última — portanto não cria margens externas inesperadas.
Esta propriedade afeta apenas elementos cujo display seja grid ou inline-grid. Não tem efeito em layouts flexbox ou multi-colunas; para esses casos, use a propriedade padrão column-gap ou o atalho universal gap.
grid-row-gap é agora um alias para a propriedade padrão row-gap, que funciona em layouts grid, flexbox e multi-colunas. Os navegadores os tratam de forma idêntica dentro de um contexto grid. Prefira row-gap (ou o atalho grid-gap que define ambos os eixos de uma vez) em código novo. grid-row-gap permanece válido e é mantido para compatibilidade retroativa.
Referência rápida
| Valor inicial | normal (tratado como 0 no grid) |
| Aplica-se a | Contêineres grid |
| Herdado | Não |
| Animável | Sim |
| Especificação | CSS Grid Layout Module Level 1 |
| Sintaxe DOM | element.style.gridRowGap = "30px" |
Quando usar
Recorra ao grid-row-gap quando quiser espaçamento vertical previsível entre as linhas do grid sem depender de margens em itens individuais. Margens entre itens do grid são problemáticas — colapsam de forma irregular, adicionam espaço nas bordas e são mais difíceis de atualizar globalmente. Um row gap, por sua vez, fica apenas entre as linhas e mantém as bordas externas do grid alinhadas, tornando o espaçamento fácil de raciocinar.
Combine-o com grid-column-gap para espaçamento horizontal, ou substitua ambos pelo atalho grid-gap quando quiser definir os gutters de linha e coluna ao mesmo tempo.
Sintaxe
/* keyword */
grid-row-gap: normal;
/* absolute length */
grid-row-gap: 20px;
grid-row-gap: 1.5em;
/* percentage of the container's block size */
grid-row-gap: 10%;
/* global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;Valores
| Valor | Descrição |
|---|---|
normal | O espaçamento padrão do navegador. Resolve para 0 dentro de um contêiner grid. |
<length> | Um valor de comprimento CSS não negativo (px, em, rem, vw, etc.). |
<percentage> | Uma porcentagem não negativa resolvida em relação ao eixo de bloco (altura) do contêiner grid. |
inherit | Herda o valor computado do elemento pai. |
initial | Redefine a propriedade para seu valor inicial (normal). |
unset | Age como inherit se a propriedade for herdável, caso contrário como initial. |
Exemplos
Sem row gap (padrão)
Com grid-row-gap: 0, as linhas ficam diretamente adjacentes sem gutter vertical. Apenas o grid-column-gap separa os itens horizontalmente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 0;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="box8">8</div>
</div>
</body>
</html>![Exemplo de CSS grid-row-gap sem espaçamento entre linhas](/uploads/media/default/0001/04/4123ae945c3b6e7b25f0fc5911ae459f604c3c1c.png "Exemplo de CSS grid-row-gap sem espaçamento entre linhas" =420x)
Gap em pixels fixo
Definir grid-row-gap: 40px adiciona um gutter de 40 pixels entre cada par de linhas. O gap de coluna permanece separado e é controlado independentemente pelo grid-column-gap.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 40px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>Gap em porcentagem
Um valor percentual é resolvido em relação ao tamanho de bloco do contêiner grid (sua altura). Isso significa que o gap cresce proporcionalmente quando o contêiner fica mais alto, o que pode ser útil para layouts fluidos e sensíveis à proporção de aspecto. Para a maioria dos layouts de conteúdo, um valor fixo em px ou rem é mais previsível.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 15%;
grid-column-gap: 3%;
background-color: grey;
padding: 40px;
}
.grid-container > div {
background-color: white;
text-align: center;
padding: 25px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>Migrando para o row-gap moderno
A especificação de CSS Grid posteriormente se alinhou às convenções de gap de multi-colunas e Flexbox, renomeando grid-row-gap para row-gap. Os dois são intercambiáveis dentro de um contexto grid, mas row-gap também funciona em contêineres Flexbox e multi-colunas. A migração é uma renomeação de uma linha:
/* Legacy — still valid, but prefer row-gap in new code */
grid-row-gap: 20px;
/* Modern equivalent */
row-gap: 20px;
/* Shorthand: sets row-gap and column-gap at once */
gap: 20px 10px; /* row-gap: 20px; column-gap: 10px */
gap: 20px; /* both row-gap and column-gap: 20px */Todos os principais navegadores suportam row-gap para grid desde o início de 2020, portanto não há razão prática de compatibilidade para continuar usando o nome grid-row-gap em novos projetos.
Problemas comuns
- Gaps em porcentagem e altura intrínseca. Quando o contêiner grid não tem
heightexplícita, o navegador não consegue resolver um row gap percentual até conhecer a altura do contêiner — que por sua vez depende do conteúdo. Essa dependência circular pode fazer o gap resolver para0. Usepxourema menos que o contêiner tenha altura fixa. - Valores negativos não são permitidos. Ao contrário das margens,
grid-row-gapaceita apenas valores zero ou positivos. Tentar definir um gap negativo é inválido e a declaração é ignorada. - O gap não adiciona espaço externo.
grid-row-gapadiciona espaço apenas entre as linhas. Se precisar de preenchimento ao redor de todo o grid, use a propriedadepaddingdo contêiner. - Itens que abrangem múltiplas linhas não são afetados. Um item que abrange múltiplas linhas com
grid-row: span 2ainda se beneficia do gap entre essas linhas como parte do seu espaço alocado.
Propriedades relacionadas
grid-column-gap— define o gap entre as colunas do grid.grid-gap— atalho que definegrid-row-gapegrid-column-gapde uma vez.column-gap— a propriedade moderna e independente de layout para espaçamento de colunas.grid-template-columns— define as trilhas de coluna entre as quais o gap fica.grid-template-rows— define as trilhas de linha separadas por este gap.grid-auto-rows— controla o tamanho das linhas criadas implicitamente.