CSS Grid: o jeito certo

CSS Grid é robusto, flexível e uma mudança de paradigma fenomenal em relação a outros sistemas de layout CSS. Mas embora esses sejam pontos superpositivos de CSS Grid, eles também podem dificultar o aprendizado da tecnologia.

Aprender CSS Grid requer o desenvolvimento de conhecimento prático de muitas novas propriedades que não descrevem apenas um aspecto da aparência ou do comportamento, mas sim um novo sistema de layout.

Embora não seja a intenção cobrir a especificação na íntegra, o que será abordado pode ser considerado os aspectos úteis desse novo sistema de layout CSS.

Vamos lá!

Use nomes ao invés de números

Em CSS Grid, colunas e linhas, em sua forma mais básica, são referidas por números. Por exemplo, esse CSS configura uma grade com 2 colunas e coloca o conteúdo principal da página na 2ª coluna:

Esse código funciona, mas falta um recurso incrível de Grid: é possível dar nomes específicos a suas linhas e colunas. Você deve aproveitar isso sempre que possível.

Eis o mesmo CSS, agora usando nomes:

Mesmo em casos mais simples, como esse, é vantajoso nomear grid areas.

Benefícios em usar nomes ao invés de números

Trabalhar com nomes ao invés de números traz alguns benefícios importantes.

Legibilidade

Logo de cara, o código é mais fácil de entender. A linha 3 agora descreve tudo que está acontecendo dentro do grid container. Você não está apenas listando colunas; você está delineando a intenção de cada coluna.

A linha 7 também se tornou mais descritiva. Anteriormente, sabíamos apenas que .content estava na 2ª coluna, o que não significa muito sem mais contexto — coluna 2 de 3? 2 de 200? Atribuir um nome de coluna, no entanto, indica que esse elemento foi especificamente explicado no sistema maior.

A nomeação também facilita a localização da declaração da coluna original, caso seja necessário.

À prova de futuro

Adicionar nomes torna o seu CSS mais flexível. Especificamente, você pode iterar em .container sem precisar editar .content.

Quer trocar a ordem visual do conteúdo e da barra lateral? Fácil:

Quer adicionar outra coluna? Sem problemas:

Sem usar colunas nomeadas, você teria que atualizar o número da coluna na linha 7 para refletir as alterações feitas na linha 3. As colunas nomeadas fornecem um comportamento consistente de .content, independentemente da contagem da coluna ou ordem.

Use fr como unidade flexível

CSS Grid introduziu a unidade fr, que instrui a uma área a ocupar alguma fração do espaço total disponível. Para alguns, fr pode parecer uma “nota de rodapé” dentro da especificação de CSS Grid Layout, mas é absolutamente indispensável.

A unidade fr é diferente de % ou vw porque, enquanto estas descrevem partes de um conjunto de 100 unidades, frs são definidas pelo espaço que ainda não foi usado, ou seja, o espaço disponível.

Aqui, o conteúdo de content tem o dobro da largura da coluna da sidebar.

Já que não há unidades sem fr e 3 frs no total, aqui 1fr vale ~33% da largura total da grid.

Benefícios em usar fr como unidade flexível

A unidade fr provê benefícios que não são possíveis com outras unidades flexíveis.

Legibilidade e intenção mais clara

O uso de fr, diferentemente do uso de %, permite-nos ficar com números inteiros que são dimensionados em relação um ao outro, não em relação a um todo.

Isso mantém o comportamento pretendido claro. Por exemplo, a linha 3 é simples de interpretar: “O conteúdo é 2x maior que a barra lateral”.

A unidade fr também permite dividir o espaço de formas que seriam difíceis de calcular (e ler) usando %:

Menos matemática

O maior benefício de fr é que ela assume a responsabilidade de fazer a aritmética, tirando esse fardo do desenvolvedor e o transferindo para o mecanismo de layout do navegador — para mim, isso é uma grande vantagem. :-)

Por exemplo, este pen mostra 2 maneiras de criar o mesmo layout usando CSS Grid. Essas linhas são o ponto crucial:

O código na linha 7 é difícil de escrever, difícil de ler e “quebradiço”. Qualquer alteração em grid-column-gap ou na contagem de colunas vai quebrar o layout — a menos que a largura da coluna seja atualizada manualmente.

A linha 11 pode ignorar o tamanho do gap e não precisará de novas contas se a contagem de colunas for atualizada. É fácil de ler e future-proof.

Não use um grid system

Neste sentido, já havíamos indicado que você não precisa de um framework CSS Grid, mas cabe um complemento.

Essa recomendação — que, a princípio, pode parecer contraditória — se estende para além das especificações de CSS Grid e sangra em como o web design funciona e como os desenvolvedores interagimos com designers e seu trabalho.

Layouts são geralmente entendidos como elementos alinhados ao longo de um sistema de grade (grid system).

Normalmente, o desenvolvimento busca a paridade exata com o design — alguém disse “pixel perfect”? Se os projetos forem baseados em uma grid de 14 colunas, o desenvolvimento configurará algum tipo de grid de 14 colunas no código e escreverá classes auxiliares para que os itens ocupem as colunas 1, 2, 3, 6 etc.

A maioria dos frameworks de frontend, como Foundation ou Bootstrap, funciona dessa maneira.

No exemplo acima, temos uma grid de 14 colunas, com esses elementos para colocar e dimensionar:

1. O cabeçalho, que começa na coluna 2 e abrange 12 colunas
2. A barra lateral, que começa na coluna 2 e abrange 4 colunas
3. O conteúdo principal, que começa na coluna 6 e abrange 8 colunas

Com CSS Grid, não é difícil configurar algo assim:

Mas isso é realmente um bom plano? Essa tentativa de reprodução 1:1 tem dois inconvenientes.

Primeiro, frustra o plano de nomear colunas. Além disso, das 14 colunas, estamos apenas “usando” as colunas 2, 5, 6 e 13. Tecnicamente, isso funciona, mas sugere uma relação sinal-ruído ruim.

Ambos os problemas podem ser resolvidos ao nos afastarmos alguns passos do design original:

Agora, ao invés de ter 14 colunas, temos apenas 4, mas elas ainda dividem o espaço lateral em 14 partes. Temos exatamente o mesmo efeito visual planejado, mas o código é menos “barulhento” e reflete diretamente como ele é usado.

E é possível continuar com esse paradigma ao longo do layout. Digamos que, dentro do elemento .content, sejam necessárias informações auxiliares (uma biografia do autor, uma sinopse etc.) ao lado do artigo principal.

Seguindo fielmente à grid de 14 colunas, seria preciso algo como:

O que será complicadinho, já que CSS Grid (por enquanto) não tem nenhum conceito de herança. .info não sabe nada sobre a grid configurada em .main, seu elemento-avô.

Se deixarmos de lado a grade literal de 14 colunas, no entanto, será possível notar que .article e .info não precisam saber nada sobre a grid de nível superior — eles fazem parte de uma nova grid dentro de .content.

Usando essa configuração, .content é simples e internamente consistente, mas também se alinha perfeitamente às colunas externas configuradas em .main.

Benefícios em não usar um grid system

Além do que já foi dito, uma adesão menos rígida ao sistema de design original nos abre espaço, como desenvolvedores, para alavancar nossa expertise e nossas ferramentas — o navegador — de forma mais eficaz. Pixels e colunas são menos salientes do que relacionamentos e espaços proporcionais.

Não é significativo que .article comece na coluna 7 e .info na coluna 11; é significativo que o artigo tenha o dobro do tamanho de .info. Pensar sobre os elementos proporcionalmente e questionar como eles interagem uns com os outros ajuda a tratar os layouts como sistemas dinâmicos.

Conclusão

Para reiterar os pontos apresentados logo no começo, CSS Grid é fácil de usar, mas difícil de aprender. É um paradigma mais intuitivo do que qualquer outra técnica de layout CSS, mas é completamente diferente de seus predecessores.

Tudo isso para dizer: aprenda CSS Grid tão lentamente quanto for necessário.

Não tente entender tudo apenas lendo as especificações. Monte exemplos simples, abra o web inspector — especialmente no Firefox, que para CSS Grid é muito melhor que as DevTools do Chrome! — e comece a brincar e fazer experimentos.

Valerá a pena.

E você, tem alguma grande dica ou sacada de CSS Grid para compartilhar? Conta pra gente nos comentários!