Defina colunas, linhas, espaçamentos e alinhamento na barra lateral, observe o layout atualizar em tempo real, então copie o CSS de grid pronto para produção.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
Use Grid para layouts bidimensionais (linhas e colunas simultaneamente). Use Flexbox para layouts unidimensionais. Grid é melhor para layouts de página; Flexbox para componentes.
A unidade fr representa uma fração do espaço disponível no contêiner. grid-template-columns: 1fr 2fr cria duas colunas onde a segunda é o dobro da primeira.