Uma das coisas mais maravilhosas do CSS é a facilidade de poder criar Grids com facilidades, nesse artigo vamos estudar umas possibilidades usando o grid-template e suas variantes em conjunto com o display: grid;.

Bora pro code!

Como fazer a Grid? Basicamente precisamos ter um container com `display: grid. Apos fazer isso temos que definir quantas colunas e quantas linhas sua Grid vai ter e para isso vamos usar grid-template-columns para colunas e grid-template-rows para linhas e o gap para dar espaços para cada elemento.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: repeat(3 1fr);
    grid-gap: 10px;
}

Note que estamos usando duas formas para atribuir medidas 1fr e repeat(3 1fr), ambas fazem a mesma coisa, atribuem 1 fração para cada coluna, quanto mais frações mais colunas ou linhas teremos para ser exibido.

GAPS

Trabalhar com gaps nos permite ter flexibilidade para tratar espaçamentos na nossa grid. O gap tem a possibilidade de receber 2 parâmetros de unidades de medidas, seja fr(fração), px(pixels) ou qualquer outro que usamos para atribuir medidas.

• Parâmetros: gap:linha coluna

Mas também temos a possibilidade de atribuir valores para somente linhas ou somente colunas usando row-gap: 1fr e column-gap: 1fr

No exemplo acima só estou usando a .box para aplicar estilização onde possamos visualizar melhor o nosso resultado.

Mas e se eu precisar de espaço diferente em cada elemento o que eu faço?

Temos uma propriedade bem legal chamada de grid-area que nos permite nomear uma classe com o nome que quiser para que ela possa ser referenciado a um modelo com a propriedade grid-template-areas.

grid-template-areas: Define um modelo de grade referenciando os nomes de grades que já foi previamente criado em um grid-area, repetir o nome faz com que o conteúdo se espalhe pelas células, um ponto representa uma célula vazia e none representa nenhuma área de grid.

.container {
  display: grid;
  grid-template-columns: repeat(4 1fr);
  grid-template-rows: auto;
  grid-template-areas:
   " | . | none | ... "
}

Exemplo:

Por enquanto é isso pessoal, uma breve abertura para esse universo de possibilidades usando grids. 💜