Espaçamento entre elementos com grid-gap

O layout CSS Grid oferece uma maneira poderosa de organizar elementos em uma grade. A propriedade grid-gap permite adicionar espaçamento entre as linhas e colunas da grade, criando um layout mais organizado e legível.

Função da propriedade grid-gap

• Função: Define o espaçamento entre as linhas e colunas do layout grid.
• Aplicabilidade: Aplica-se a containers com display: grid.
• Valores possíveis:
  • Valor único: Define o mesmo espaçamento para linhas e colunas. Ex: grid-gap: 10px;
  • Dois valores: Define o espaçamento para linhas e colunas separados por um espaço. Ex: grid-gap: 10px 20px;
  • Quatro valores: Define o espaçamento para linhas e colunas, superior e inferior, separados por espaços. Ex: grid-gap: 10px 20px 30px 40px;
  • initial: Retorna ao espaçamento padrão do navegador.
  • inherit: Herda o valor de grid-gap do container pai.

Exemplos práticos

1. Adicionar espaçamento uniforme entre todas as linhas e colunas:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 10px;
}

2. Adicionar espaçamento maior entre as colunas:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 10px 20px;
}

3. Definir espaçamento individual para linhas superior/inferior e colunas:

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 20px 10px 30px 40px;
}

Dicas e considerações:

• A propriedade grid-column-gap define o espaçamento apenas entre as colunas.
• A propriedade grid-row-gap define o espaçamento apenas entre as linhas.
• O espaçamento é aplicado antes de calcular o tamanho das áreas de grade.
• Use grid-gap em conjunto com outras propriedades de layout grid para criar layouts complexos.

Conclusão

grid-gap é uma propriedade essencial para criar layouts grid com espaçamento adequado.