Os layouts em grade são fundamentais para o design de sites, e o módulo CSS Grid é a ferramenta mais poderosa e fácil para criá-lo. Eu pessoalmente acho que é muito melhor do que, por exemplo, Bootstrap (leia o porquê aqui).
O módulo também obteve suporte nativo dos principais navegadores (Safari, Chrome, Firefox, Edge) este ano, então acredito que todo desenvolvedor front-end terá que aprender esta tecnologia em um futuro não muito distante.
Neste artigo, eu o conduzirei pelos fundamentos básicos o mais rápido possível. Vou deixar de fora tudo o que você não deve se preocupar até que tenha entendido o básico.
Seu primeiro layout de grade – CSS Grid
Os dois ingredientes principais de uma grade CSS são o wrapper (pai) e os items (filhos). O invólucro é a grade real e os itens são o conteúdo dentro da grade.
Esta é a marcação para um invólucro com seis itens nele, Para transformar nosso div wrapper em uma grade, simplesmente exibimos a grade:
See the Pen CSS – Css Grid by John Pires (@johnpiresBR) on CodePen.
Mas, isso não faz nada ainda, pois não definimos como queremos que nossa grade se pareça. Ele simplesmente empilha 6 divs um em cima do outro.
Colunas e linhas
Para torná-lo bidimensional, precisaremos definir as colunas e linhas. Vamos criar três colunas e duas linhas. Usaremos as propriedades grid-template-row e grid-template-column.
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}Como escrevemos três valores para as colunas do modelo de grade, obteremos três colunas. Obteremos duas linhas, pois especificamos dois valores para as linhas do modelo da grade.
Os valores determinam a largura que queremos que nossas colunas tenham (100px) e a altura que queremos que nossas linhas tenham (50px). Aqui está o resultado:
See the Pen CSS – Css Grid 2 by John Pires (@johnpiresBR) on CodePen.
Para ter certeza de que você entendeu corretamente a relação entre os valores e a aparência da grade, dê uma olhada neste exemplo também.
See the Pen CSS – Css grid 3 by John Pires (@johnpiresBR) on CodePen.
Colocando os itens – CSS Grid
A próxima coisa que você precisa aprender é como colocar itens na grade. É aqui que você obtém superpoderes, pois torna muito simples criar layouts.
Vamos criar uma grade 3×3, usando a mesma marcação de antes.
Para posicionar e redimensionar os itens, nós os direcionaremos e usaremos as propriedades grid-column e grid-row, O que estamos dizendo aqui é que queremos que o item1 comece na primeira linha da grade e termine na quarta linha da coluna. Em outras palavras, ocupará toda a linha. Veja como isso vai se desenrolar na tela:
See the Pen CSS – Grid CSS 4 by John Pires (@johnpiresBR) on CodePen.
Observe que agora estamos usando todas as linhas da grade. Quando fizemos o primeiro item ocupar toda a primeira linha, ele empurrou o resto dos itens para baixo.
Finalmente, gostaria de mostrar uma maneira mais simples de escrever a sintaxe acima, É assim que fica na página. Tente entender por que parece que sim. Não deve ser muito difícil.
See the Pen CSS – CSS Grid 5 by John Pires (@johnpiresBR) on CodePen.
Achou esse post interessante? acesse nossos cursos de HTML & CSS.