Um pouco sobre CSS Grid Layout

O CSS Grid Layout é uma tecnologia do CSS que desde 2017 está
presente na maioria dos principais navegadores modernos. Ela nos permite criar
layouts baseados em grids de uma forma extremamente rápida, fácil e…
padronizada. Apresentarei rapidamente nesse artigo um pouco das principais
coisas que você pode fazer com essa feature.

Introdução

Não há segredo algum para dar início a um elemento simples. Para isso basta
criar uma estrutura HTML com um container e alguns itens que farão parte do
layout. Veja uma estrutura bem simples para começar:

Após isso, você terá duas opções para fazer com que o elemento .grid seja uma
grid: ou você usa display: grid ou display: inline-grid. A diferença entre
essas duas opções, pode-se dizer, que é a mesma entre block e inline-block.

Para o exemplo usaremos somente display: grid.

Veja o resultado:

See the Pen

wRLZap

by

@theuves
on
CodePen.

Configuração básica do container

Se você olhou o resultado do código anterior, percebeu que não houve nada de
interessante. Pelo contrário, tudo ficou como se você tivesse definido um
simples display: block, visto que todos os itens ficaram um embaixo do outro
sem nenhuma coluna definida – posto que esse é o principal objetivo do CSS Grid
Layout.

Para que possamos montar a nossa grid, antes devemos definir qual será o seu
formato, por exemplo: 3 colunas × 2 linhas – que é o que será usado nesse
exemplo. Depois disso, usa-se a propriedade grid-template-columns para
definir a quantidade de colunas e a largura de cada uma delas e consequentemente
fazer a quebra de linhas que é automática.

Isso é bem intuitivo, onde percebe-se facilmente que haverá três colunas e que
elas terão, respectivamente, 100px, 200px e 300px. Veja o exemplo no CodePen:

See the Pen

yGdrJZ

by

@theuves
on
CodePen.

No entanto, se você quisesse colunas com larguras iguais, relativas à largura
do container (onde, consequentemente, cada coluna teria cerca de 33,3% de
largura), bastaria adicionar a propriedade auto para todas, ficando:

DICA: Quando você tiver um caso como esse, no CSS Grid, você terá a
possibilidade de utilizar a função repeat() e economizar algumas dedadas no
teclado, além de deixar o código mais atraente. Nesse caso em específico
poderiamos ter usado repeat(3, auto). Veja mais sobre essa função no MDN web
docs (em inglês).

Se tem grid-template-columns, certamente deveria ter também
grid-template-rows. E tem! Com essa propriedade você basicamente definirá a
altura de suas linhas. Sem segredos: é o mesmo sistema das colunas.

Configuração básica dos itens

Agora que foi apresentado algumas configurações para o container que abrigará
os itens, é importante saber qual configuração os itens podem ter. As
propriedades existentes para os itens do CSS Grid Layout se resumem
simplesmente em definições para a localização e o espaço ocupado por eles.
Desse modo, por exemplo, você pode fazer com um que um item ocupe o espaço de
outros itens também, permitindo, assim, que você não fique preso apenas à
containers quadriculados.

Para isso temos as seguintes propriedades:

• grid-row-start – que recebe a linha vertical em que deve iniciar,
• grid-row-end – que recebe a linha vertical em que deve acabar,
• grid-column-start – que recebe a linha horizontal em que deve iniciar e
• grid-column-end– que recebe a linha horizontal em que deve acabar.

DICA: Há algumas formas abreviadas para tudo isso. Você pode usar somente
grid-row ou grid-column e receber dois
valores de *-start e *-end respectivamente. Ou você também pode usar
grid-area que recebe respectivamente: *-row-start,
*-column-start, *-row-end e *-column-end separados por uma barra (/).
Você pode entender melhor o funcionamento desses atalhos clicandos nos links
e lendo a documentação detalhada de cada um (em inglês).

Veja um exemplo simples do que essas propriedades podem fazer:

See the Pen

oJrRWq

by

@theuves
on
CodePen.

Observe que o style que define o comportamento do item 1 é:

Um código como esse pode ser um pouco contra-intuitivo, pois veja que o
grid-row-end é 3 enquanto só temos 2 linhas e não 3. Isso ocorre pois o valor
recebido por essas propriedades não se referem à linha DE cada item e sim à
linha ENTRE cada item. Veja a ilustração abaixo para entender o funcionamento
desses tipos de linha:

Desse modo, o código do exemplo mais acima inicia entre a borda e o começo da
linha do item 1 e termina no final da linha do item 2.

DICA: Para facilitar o entendimento de um código como esse, poderiamos
ter simplesmente usado span antes da linha do item. Por exemplo:
grid-row-end: span 2. Isso deixaria mais claro que deveria terminar na linha
2 dos itens.

Distância entre itens

Se você prestou atenção no último exemplo de código no CodePen, viu que há um
espaço entre os itens, certo?! Para distanciar um item de outro, você
intuitivamente poderia pensar em usar margin dentro deles, porém, essa não
seria a melhor solução para o problema. O CSS oferece as seguintes propriedades
para fazer isso padronizadamente:

• grid-column-gap – que distancia os itens das colunas
• grid-row-gap – que distancia os itens das linhas e
• grid-gap – que é uma forma abreviada dos outros.

Observe que essas propriedades devem ser definidas dentro do container e não
dentro dos itens. Além disso, tenha em mente que grid-gap pode receber um
único valor que será usado tanto para a coluna quanto para a linha ou pode
receber dois valores: um para a linha e outro para a coluna, respectivamente.

Alinhamento de itens

O CSS também nos dá a possibilidade de alinhar os itens dentro do
container, tendo as propriedades justify-content (para o alinhamento
horizontal dos itens) e align-content (para o alinhamento vertical dos itens).
Contudo, essas propriedades não são exclusivas do CSS Grid Layout. Veja no MDN
web docs a documentação delas e tenha uma experiência interativa do que cada
valor pode fazer, acessando aqui (para justify-content)
e aqui (para align-content).

Nomeando itens

Essa, sem dúvidas, é a parte mais interessante do CSS Grid Layout, no qual,
podemos nomear cada item e fazê-los se posicionarem automaticamente no
container, sem a necessidade de configurar grid-row, grid-column ou
qualquer outra coisa do gênero, além de deixar o código extremamente semântico.

Para isso, basta definir a propriedade grid-template-areas como um template
do itens do container e em seguida “linkar” as definições desse template
dentro de cada item como a propriedade grid-area.

Veja a seguinte estrutura HTML:

E a seguinte definição CSS:

Agora veja o resultado no CodePen:

See the Pen

ZVdVGP

by

@theuves
on
CodePen.

Mais informações

Isso tudo é o básico que pude colocar em um artigo de rápida leitura. Caso você
queira se aprofundar na tecnologia, poderá ver a documentação da
Mozilla ou da W3Schools (ambos em inglês). Há
também um artigo interessante no CSS-Tricks chamado A Complete Guide to
Grid (em inglês também) que você pode dar uma conferida para
estudar um pouco mais.