# Como criar templates com CSS Grid
> Crie templates poderosos com CSS Grid facilmente. Guia prático sobre grid-template-areas, linhas nomeadas e layouts profissionais semânticos. Domine Grid!
URL: https://dpw.dev/css/css-grid-como-criar-templates/
Publicado em: 2019-06-24
Categoria: css
Tags: css-grid, layout, web-design-responsivo
Autor: Tárcio Zemel
CSS Grid chegou para transformar e aprimorar de vez como se faz layouts na Web. Mas **como criar templates com CSS Grid?**
> Artigo baseado em [Creating Simple Layout Templates with CSS Grid](https://teamgaslight.com/blog/creating-simple-layout-templates-with-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.
```scss
body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr minmax(300px, 65vh) 1fr;
}
```
Que resultará em algo como:
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`.
```scss
.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.
```scss
body {
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
```
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.
```scss
body.template__article {
grid-template-areas:
"main main main"
"main main main"
"footer footer footer";
}
```
```scss
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.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml