Como criar templates com CSS Grid

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.

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr minmax(300px, 65vh) 1fr;
}

Que resultará em algo como:

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.

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.list__col-1 {
  grid-area: list-col-1;
}

.list__col-2 {
  grid-area: list-col-2;
}

.list__co3-1 {
  grid-area: list-col-3;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

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.

body {
  grid-template-areas:
    "header header header"
    "main   main   sidebar"
    "footer footer footer";
}

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.

body.template__article {
  grid-template-areas:
    "main   main   main"
    "main   main   main"
    "footer footer footer";
}

body.template__list {
  grid-template-areas:
    "header     header     header "
    "list-col-1 list-col-2 list-col-3"
    "footer     footer     footer";
}

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.