Grid Layout

O Grid Layout, também conhecido apenas como Grid, é um sistema de layouts em duas dimensões que visa nada menos que revolucionar a forma que o layout baseado em grid é feito. Desde os primórdios, o CSS sempre foi usado para estilizar as páginas Web, entretanto, nunca foi um trabalho prazeroso. Inicialmente, usamos tabelas, depois float e inline-block, mas esses métodos deixavam de fora muitas funcionalidades importantes.

Contudo, o Flexbox chegou para ajudar na criação de layouts mais exigentes, se torna excessivamente complexo. De fato, o Grid é um módulo do CSS criado para auxiliar nos problemas de estilização de layout, trabalhando muito bem em conjunto com o Flexbox e, pôr fim às improvisações que eram feitas desde o início ao fazer páginas Web.

Conceitos Básicos

Antes de iniciarmos, é preciso entender a terminologia. Sendo os termos bastante similares, é bem fácil confundi-los, caso não tenha domínio do que é definido na especificação do Grid.

De forma similar ao Flexbox, é preciso haver um “container”, onde o display: grid é aplicado. É o “pai” de todos os itens da Grid. Por exemplo, “pai” é o container da grid.

Os filhos, são os descendentes diretos. No trecho de código abaixo temos “filho” como elementos da grid, mas “neto” não é.

Grid Lines

As linhas são o que dividem a estrutura da Grid, podem ser verticais (columns) ou horizontais (rows). Na imagem abaixo, um exemplo de linha do grid column.

Grid tracks

É o espaço adjacente entre duas linhas do grid, na figura abaixo, temos um grid track entre a primeira e a segunda linha do grid row.

Grid Cells

É o espaço entre duas linhas adjacentes na row e na column grid lines.

Grid Area

Uma grid area é um espaço lógico que consiste em uma ou mais células adjacentes, ou seja, uma grid area pode compreender qualquer número de células grid. Abaixo, podemos observar uma grid area composta por quatro grid cells.

Propriedades para o container (pai)

display: define o elemento como como container grid e estabelece uma relação entre o container e seus conteúdos. Seus valores possíveis são:

grid-template-columns/grid-template-rows: Define as colunas e as linhas em uma lista separada de valores. Os valores representam o tamanho da track. Podem ser usadas qualquer medida válida de tamanho: px, fr, porcentagem, auto.

Tendo sido aplicado um background-color diferente em cada elemento da div, fica bem claro compreender que nas colunas as cores distintas se apresentam com tamanhos conforme declaradas no container, como dito acima, é aceito qualquer medida de tamanho, conforme explicitado nas colunas e nas linhas. Também é possível, para casos em que deseja tamanhos iguais, utilizar a medida fr, que seria uma fração, ou seja, caso declare: grid-template-columns: 1fr 1fr 1fr; ou simplesmente, grid-template-columns: repeat(3, 1fr); teremos basicamente 3 divs de 1/3 do tamanho do container cada.

grid-template-areas: Define um template grid referenciando os nomes das áreas especificadas por grid-area. Repetindo o nome da área, faz com que seu conteúdo se expanda sobre as células. O caractere “.” Significa uma célula vazia. A sintaxe por si só dá uma ideia de como será a estrutura da grid.

Conforme demonstrado pelo resultado acima, temos o header ocupando todo o espaço, disponível da primeira row, o main, chamado de principal, ocupa uma fração, divindo a segunda row com um espaço vazio e o aside, em preto, o sucedendo, o footer, assim como o header, ocupa o espaço de todas as colunas da terceira linha.

grid-column-gap/grid-row-gap: Especifica o tamanho das linhas do grid, é também usado para dar um ligeiro espaçamento entre os elementos. Pode ser usada a propriedade grid-gap como forma abreviada para essa propriedade.

No resultado abaixo, podemos ver que há um espaçamento entre os elementos da coluna e da linha, entre a div de cor cinza e a de cor verde há um espaçamento de 10px, um pouco menor que o espaçamento de 15px entre a própria div de cor cinza e de cor azul.

Caso queira usar a forma abreviada, grid-gap, primeiro deve ser declarada o gap correspondente a <grid-row-gap> e depois <grid-column-gap>, caso um dos valores seja omitido, então grid-gap definirá o mesmo valor para row e column.

justify-items/align-items: justify-items alinha o conteúdo dentro de um item da grid no eixo das “rows”, eixo oposto ao align-items. A propriedade é aplicada no container e pode receber os seguintes valores:

• start: Alinha o conteúdo à esquerda da área do grid.
• end: Alinha o conteúdo à direita da área do grid.
• center: Alinha o conteúdo no centro da área do grid.
• stretch: Preenche toda a largura da área do grid. Esse é o valor default dessa propriedade.

justify-content/align-content: Caso a área do item da grid seja menor que a área do container, é possível alinhá-lo, o justify-content no eixo das rows e o align-content no eixo oposto. Os seus valores possíveis são:

Propriedades para os itens (filhos)

grid-column-start/grid-column-end/grid-row-start/grid-row-end: Determina onde o item se localizará dentro do container ao referir linhas e colunas específicas. Pode ser usada a forma abreviada grid-column e grid-row

Essa figura esquisita acima, demonstra bem o que aconteceu, para a div de cor verde, foi declarado que devia iniciar na coluna 3 e finalizar na coluna 5, deixando vazias as duas primeiras colunas.

grid-area: Dá ao item, o nome referenciado na propriedade do container grid-template-areas, também pode ser usada de forma alternativa como uma forma ainda mais contraída de grid-column-start/grid-column-end, grid-row-start/grid-row-end.

Trabalha em conjunto com grid-template-area devendo referenciar nos items, o nome da área declarada no container.

justify-self/align-self: Funciona de forma similar a justify-items/align-items, alinhando um item em específico da div filha (no eixo rows e columns respectivamente), recebe exatamente os mesmos valores que seu similar no container.

Suporte dos navegadores

Por ser uma tecnologia mais recente, nem todos os navegadores têm o suporte mais adequado, desde março de 2017 os maiores navegadores estão reconhecendo o grid nativamente, o Microsoft Edge na sua próxima versão também terá nativamente o grid layout, mas até o momento, o suporte completo ainda não está totalmente implementado.

Considerações Finais

Com a exigência da complexidade dos layouts aumentando, podemos perceber o quanto o Grid veio para solucionar os problemas dos desenvolvedores front-end no que tange à criação, organização e posicionamento nos layouts do CSS3. Com inúmeras possibilidades, propriedades, além do fato de trabalhar muito bem em conjunto com o Flexbox, faz com que os problemas conhecidos com o float e o display: inline-block sejam mitigados e, além disso, faça com que o desenvolvimento da estilização da página web seja mais simples e menos problemática.