Aprenda a construir sites bidimensionais com CSS Grid

Com o CSS Grid, você pode criar layouts bidimensionais de sites na metade do tempo que faria normalmente.

CSS Grid é o sucessor do sistema de layout float e, embora ainda existam casos em que usar a estrutura de layout float pode ser mais prático do que usar CSS Grid, alguns desenvolvedores tendem a usar apenas CSS Grid para estruturar seus sites.

Isso não é surpresa, pois CSS Grid é uma ferramenta poderosa para se ter em seu arsenal. Este guia irá ensiná-lo a usar CSS Grid em todos os seus projetos de desenvolvimento web.

Como funciona o sistema de grade CSS

CSS Grid (ou apenas Grid) é essencialmente um sistema bidimensional de layout de site que é usado para estruturar os elementos em uma página da web. O sistema de layout de grade CSS é construído em um conceito pai-filho, onde você teria um contêiner principal (o pai) e vários itens de grade diferentes (os filhos) dentro desse contêiner.

Para usar CSS Grid em qualquer site da Web, primeiro você precisa inicializar o contêiner Grid. Isso é feito definindo a propriedade display do elemento pai pretendido para o valor de grade.

Exemplo de contêiner de grade CSS

 
selector{
 display: grid;
 }

O seletor pode ser um elemento HTML, uma classe ou um id; o importante é que ele identifica diretamente o elemento HTML que inclui todos os outros elementos HTML da página da web.

Em uma estrutura de layout de grade, todos os elementos dentro do contêiner são chamados de itens de grade . Por padrão, o layout da grade CSS é vertical (que também é a estrutura de layout padrão em HTML), portanto, quando uma grade CSS é inicializada usando a propriedade display acima, o layout dos itens da grade permanecerá o mesmo (vertical).

Para reorganizar os itens de grade na página da web, você precisará usar a propriedade grid-template-columns , a propriedade grid-template-rows ou uma combinação de ambas.

É por isso que o CSS Grid é identificado como um sistema de layout bidimensional; ele permite que você estruture seus itens de grade horizontalmente (linhas) e verticalmente (colunas) ao mesmo tempo.

Usando a propriedade Grid-template-columns

A propriedade grid-template-columns deve sempre ser usada dentro do elemento container ao lado da propriedade display. Com a propriedade grid-template-columns , você pode especificar o número de colunas que deseja em seu layout de grade CSS, de uma das várias maneiras.

Uma maneira de estruturar seus itens de grade é usando pixels (px).

Exemplo de estruturação de itens de grade com pixels

 
.gridContainer{
 display: grid;
 grid-template-columns: 400px 400px 400px;
 }

Há duas coisas que você precisa observar no exemplo acima. A primeira é que usar o código acima criará três colunas com largura de 400px cada em sua página da web. Se você tiver menos de três itens de grade em seu contêiner, terá apenas uma ou duas colunas sendo exibidas em sua tela.

No entanto, se o número de itens de grade em seu contêiner exceder três, cada grupo de três itens de grade será colocado em uma nova linha, até que sejam concluídos.

A segunda coisa a notar é que usar valores de px para estruturar seus itens de grade não é uma abordagem muito prática. Isso ocorre principalmente porque a unidade de pixels não suporta um design responsivo .

Volte para o exemplo acima; se tivéssemos seis itens de grade em nosso contêiner, os dois itens de grade à esquerda não seriam imediatamente visíveis em um tablet.

Uma alternativa recomendada ao uso de px (ou qualquer outro valor fixo) para o layout de seus itens de grade é usar frações (unidades de fracções).

Exemplo de uso de valores de fração

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

O código acima irá gerar duas colunas na página da web pretendida. A coluna da direita terá o dobro da largura da coluna da esquerda. A principal razão pela qual o uso de fr é recomendado é porque fr oferece suporte à capacidade de resposta.

Portanto, seja qual for o tamanho da tela em um dispositivo, a coluna à direita sempre será duas vezes maior que a coluna à esquerda.

Esse layout é popular em casos em que há uma seção lateral em uma página da web. A coluna de tamanho menor seria reservada para a seção ao lado, que conteria conteúdo relacionado, mas não como parte do fluxo principal (como um índice analítico).

Usando a propriedade Grid-template-rows

Os critérios para usar a propriedade grid-template-rows são um tanto idênticos aos da propriedade grid-template-columns.

Uma diferença óbvia é que onde a propriedade grid-template-rows cria linhas, a propriedade grid-template-columns cria colunas. No entanto, existem outras diferenças mais sutis entre as duas propriedades (como as linhas implícitas e a estrutura geral da linha).

A Estrutura da Linha

Voltando ao exemplo de uso de valores de fração acima, se esse código for usado em mais de dois elementos, os elementos extras serão agrupados criando linhas adicionais com duas colunas até que todos os elementos estejam na grade.

Este não é o caso com a propriedade grid-template-rows . Considere o seguinte exemplo.

Exemplo de linhas de modelo de grade

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 }

Se o código CSS acima é feito para direcionar um documento HTML que contém cinco tags <div> que são filhos diretos do elemento de classe gridContainer, então o primeiro elemento manterá sua altura padrão, e o segundo elemento terá uma altura que é três vezes o tamanho do primeiro.

O problema se torna aparente quando você alcança o terceiro elemento div; você descobrirá que, em vez de envolver e criar uma segunda coluna, as linhas continuarão ininterruptas na tela. Essas linhas são chamadas de linhas implícitas porque não serão afetadas pelo código acima e continuarão a reter sua altura padrão.

Essas linhas implícitas podem ser direcionadas usando a propriedade grid-auto-rows .

Usando a propriedade Grid-auto-rows

A propriedade grid-auto-rows é freqüentemente usada para atribuir altura a linhas em uma grade que está fora do intervalo da propriedade grid-template-rows .

Exemplo de linhas automáticas de grade

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 grid-auto-rows: 3fr;
 }

Se o código CSS acima for usado para direcionar um contêiner que inclui cinco itens de grade diretamente, a propriedade de linhas de modelo de grade acima será aplicada aos dois primeiros itens de grade, enquanto a propriedade de linha automática de grade será aplicada aos outros três elementos — resolvendo efetivamente o problema das linhas implícitas.

Embora você possa usar o grid-template-row e o grid-template-colunas separadamente quando necessário, é recomendado que você use o CSS Grid quando layouts bidimensionais (linhas e colunas) são necessários. Se a necessidade for apenas de um layout unidimensional (linhas ou colunas), uma estrutura de layout flutuante seria uma opção muito melhor.

Estruturar o layout do seu site nunca foi tão fácil

Com o CSS Grid você pode criar um site bidimensional, baseado no conceito pai-filho. As coisas que você precisa se lembrar para tornar isso possível incluem:

• Atribuindo o valor da grade à propriedade de exibição no elemento do contêiner.
• Usando as linhas de modelo de grade e colunas de modelo de grade dentro do elemento de contêiner.
• Usando a propriedade grid-auto-row quando a quantidade de elementos no elemento contêiner ultrapassa o que a propriedade grid-template-rows visa.

A lição final é garantir que você use efetivamente o CSS Grid em estruturas de layout bidimensionais. Quando uma estrutura de layout unidimensional é necessária, a estrutura de layout flutuante pode provar ser uma opção melhor.