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.

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;
}

body {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: 1fr minmax(300px, 65vh) 1fr;

}

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.

.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;
}

.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";
}

body {

grid-template-areas:

"header header header"

"main main sidebar"

"footer footer footer";

}

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.

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

body.template__article {

grid-template-areas:

"main main main"

"footer footer footer";

}

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

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

body.template__list {

grid-template-areas:

"header header header "

"list-col-1 list-col-2 list-col-3"

"footer footer footer";

}

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.