Nas lições anteriores, falamos um pouco sobre como criar espaço entre os itens da grade. Mas nesta lição, vamos nos aprofundar mais em detalhes sobre como usar as propriedades row-gap, column-gap e gap em um layout de grade. Mas primeiro precisamos revisar o que é uma track no CSS grid. Uma track é o espaço entre duas linhas de grade vizinhas. Essas linhas são criadas automaticamente quando você usa CSS Grid. Neste contexto, tracks geralmente se referem às linhas e colunas que compõem o layout da grade. Para criar espaços entre colunas em um CSS Grid, você pode usar a propriedade column-gap. Valores aceitáveis para esta propriedade incluem pixels, a unidade em, porcentagens ou a palavra-chave normal. Se você usar o valor normal para a propriedade column-gap, então o resultado será 0 para layouts de grade e 1em para layouts multi-coluna. Aqui está um exemplo da marcação para um layout de grade com quatro colunas:

<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Para o CSS, definimos o display como grid e a propriedade column-gap para 10 pixels:

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.grid-container {
  display: grid;
  height: 100px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 10px;
}

.grid-container div {
  background-color: darkblue;
}

Se quisermos alterar o exemplo para ter duas linhas de caixas azuis e criar mais espaço entre as linhas, podemos usar a propriedade row-gap:

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 30px;
}

.grid-container div {
  height: 100px;
  background-color: darkblue;
}

Neste exemplo revisado, estamos definindo a propriedade row-gap para 30 pixels e alterando o grid-template-columns para usar apenas duas unidades 1fr em vez de quatro para criar duas linhas de caixas. Assim como a propriedade column-gap, os valores aceitáveis para a propriedade row-gap podem incluir porcentagens, em e pixels. Se você quiser usar uma forma abreviada para criar espaços entre linhas e colunas, pode usar a propriedade gap. Aqui está a sintaxe básica:

gap: row-value optional-column-value;

Se você especificar um valor para a propriedade gap, esse valor será aplicado tanto para linhas e colunas. Se você especificar dois valores, o primeiro valor será aplicado à linha e o segundo será aplicado à coluna:

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 10px;
}

.grid-container div {
  height: 100px;
  background-color: darkblue;
}

Valores aceitáveis para a propriedade abreviada gap incluem porcentagens, pixels, em e até valores calc(). Mas você não pode usar unidades fr aqui. As propriedades row-gap, column-gap e gap fornecem maneiras flexíveis de controlar o espaçamento entre itens em um layout CSS Grid. Ao usar essas propriedades, você pode criar facilmente grades visualmente atraentes com espaçamentos consistentes e ajustáveis entre linhas e colunas.