[Dúvida] O que a classe Bootstrap 'grid' faz exatamente? | Bootstrap5: crie uma landing page responsiva

Vi que na documentação do Bootstrap 5 em espaçamento, a documentação fala sobre a classe de espaçamento entre conteúdo gap, mas no exemplo de código mostrado, a div pai possui uma classe grid, ao remover a classe grid da div pai, percebi que a classe utilitáriagap(qualquer variante como gap-* ou row-gap-* ou column-gap-*) não funcionam:

<div class="grid gap-0 row-gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

Reparem também que as classes utilitárias de colunas possuem o prefixo g seguido do radical de coluna e de valor de espaçamento (g-col-6 por exemplo). Alguém sabe me dizer por que isso acontece? Estou recorrendo ao fórum pois a própria documentação não explica essas classes, não pelo menos na página de espaçamento.

Olá, Rafael!

Entendo que a documentação do Bootstrap pode ser um pouco confusa às vezes, mas estou aqui para te ajudar a esclarecer essas dúvidas.

A classe grid que você mencionou é uma nova adição no Bootstrap 5 e é usada para criar um layout de grade CSS, que é um sistema bidimensional, significando que pode lidar com colunas e linhas, ao contrário do flexbox que é em grande parte um sistema unidimensional.

A razão pela qual as classes utilitárias gap não funcionam sem a classe grid é que o gap (junto com row-gap e column-gap) são propriedades de grade CSS, e assim, só funcionam dentro de um container de grade CSS, que é criado pela classe grid.

Quanto às classes g-col-*, elas são usadas para definir a largura das colunas dentro do grid. O prefixo g é usado para diferenciar das classes de coluna do sistema de grid baseado em flexbox do Bootstrap (as classes col-*). Então, g-col-6 irá criar uma coluna que ocupa 6 das 12 colunas do grid.

Aqui está um exemplo prático:

<div class="grid gap-2">
  <div class="g-col-6">Esta div ocupa metade do grid</div>
  <div class="g-col-6">Esta div ocupa a outra metade do grid</div>
</div>

Neste exemplo, temos um grid com um espaço de 2 unidades entre as colunas (gap-2). Dentro desse grid, temos duas divs, cada uma ocupando metade do grid (g-col-6).

Espero que isso esclareça suas dúvidas sobre a classe grid e as classes utilitárias de espaçamento e colunas. Lembre-se, a documentação do Bootstrap é uma grande fonte de informação, mas às vezes pode ser necessário um pouco de experimentação e prática para entender completamente como tudo funciona.

Espero ter ajudado e bons estudos!

Mergulhe em programação