Começando com CSS Grid Layout!

CSS Grid Layout é um módulo do CSS que permite desenvolver layouts, baseado em colunas e linhas de um jeito simples e rápido.

Há um tempo atrás usávamos “floats” para estruturar o layout da página. O problema é que esse recurso não é projetado para isso, e sim, apenas posicionar elementos de um lado ou outro (left e right). Quem trabalhou com floats sabe que isso gerava comportamentos estranhos, que tínhamos que usar alguns “hacks” para não quebrar o layout.

Assim como o “Flexbox”, o CSS Grid veio para facilitar nossas vidas.

Uso básico:

<div class="container">
<div class="item">
<div class="item">
<div class="item">
</div>

Temos um container com três divs nele. Para iniciar o grid, basta colocar a propriedade “grid” no display do elemento pai, ou seja, no container. A partir daí todos os filhos já estão dentro do grid.

.container {
display: grid;
}

grid-template-columns

Essa propriedade define as linhas do nosso layout.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Agora temos três colunas alinhadas no grid. A unidade "fr" determina quantas partes aquele item vai preencher. Então, no exemplo, cada item vai preencher uma parte igual da tela. Se quiséssemos que o primeiro item ocupasse 2 partes, basta mudar para 2fr:

.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}

grid-column-gap

Define o espaçamento das colunas dentro do grid. No nosso exemplo estamos sem espaçamento nenhum. Mas podemos facilmente colocar valores, sem se preocupar com margins e paddings.

.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-column-gap: 20px;
}

Pra esse post não ficar muito extenso, vou parar por aqui e nos próximos dias coloco mais um pouco de propriedades. =)

Criei essa uma pen aqui pra visualizar melhor. Você pode ir brincando com os valores e alterando pra ver o resultado.

Até a próxima, pessoal.