Como criar templates com CSS Grid

CSS Grid é o primeiro sistema de layout efetivo para a Web. Neste artigo, veja como criar templates com CSS Grid.

Ir para o artigo

CSS Grid chegou para transformar e aprimorar de vez como se faz layouts na Web. Mas como criar templates com CSS Grid?

Há muito a se amar sobre CSS Grid e os vários métodos que ele fornece para definir um layout. Claro, com grandes poderes, vêm grandes códigos front-end macarrônicos.

Não demorou muito para começarem a aparecer grid layouts com uma confusão emaranhada de grid-columns e grid-rows.

Nomeando componentes com Template Areas

CSS Grid é o primeiro sistema verdadeiro de layouts para a Web. Até então, usávamos arranjos, quebra-galhos e gambiarras.

E CSS Grid chegou com tudo, já sendo tão bem aceito não somente por oferecer soluções para problemas de décadas, mas por oferecer diversas maneiras de fazer isso.

Definir e reorganizar template areas de CSS Grid é um dos métodos mais simples e diretos para criar partes de template que podem ser reunidas em diferentes layouts de página.

Definindo a Grid

Para criar templates com CSS Grid, primeiro é preciso definir as grid lines (linhas de grid).

Para este exemplo, criaremos 3 colunas de largura igual e 3 linhas com uma linha central maior.

Que resultará em algo como:

Como criar templates com CSS Grid: resultado inicial do exemplo de grid
Em CSS Grid não é incomum que a definição da grid seja dada no próprio elemento body.

Atribuindo Template Areas

Depois de definir as grid lines, o próximo passo é criar classes para os contêineres que representarão as diferentes seções da grid e atribuir a cada uma delas um nome de grid-area.

Definindo o layout

Para definir o layout-base, usa-se a propriedade grid-template-area. Os nomes atribuídos à grid-area de cada contêiner podem ser dispostos de acordo com as colunas e linhas definidas.

Quando se adiciona cada row das template areas a uma nova linha, o CSS se torna um padrão visual de grid layout.

Como criar templates com CSS Grid: resultado esquemático da atribuição das template areas
Perceba que, no código, há espaços extras entre os nomes da segunda linha. Isso não prejudica em nada o resultado final e facilita o “escaneamento visual” do que está sendo montado.

Como adaptar o layout a diferentes templates

Agora é só dar asas à imaginação e definir variações de layout para quantos templates seja necessário.

Por exemplo, é possível usar CSS Grid para adaptar o template para um modelo de artigo com cabeçalho ou barra lateral e um template de lista de artigos.

Como criar templates com CSS Grid: variação do exemplo de template com conteúdo principal e rodapé
Como criar templates com CSS Grid: variação do exemplo de template com cabeçalho e 3 colunas no conteúdo principal

Conclusão

Agora você já sabe como criar templates com CSS Grid, que é, efetivamente, o primeiro sistema de layouts para a Web. E é fantástico!

Com o advento de CSS Grid, tornou-se possível criar facilmente diferentes tipos de layouts. E agora é possível considerar como essa incrível tecnologia de layouts ajudará a resolver outro problema…

Com o surgimento de design systems (sistemas de design), a tendência em desenvolvimento web moderno é construir componentes consistentes que são montados para criar componentes maiores que se encaixam através das diferentes páginas do site/app.

Você já percebeu? Não estamos mais desenvolvendo páginas simples; basicamente, a mentalidade em desenvolvimento web atual é basicamente voltada para o desenvolvimento de componentes.

Então, como incorporar esse ótimo método de layout que é criar templates com CSS Grid em um processo de design system?

Isso é assunto para outro outro artigo.

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS