Usando grid-template-areas do CSS Grid

Escrito por Hugo de Oliveira em 16/02/2024.

Áreas facilitam muito a criação de layouts no CSS Grid. Junto com todas as outras ferramentas desse algoritmo de layout do CSS, áreas deixam simples criar layouts responsivos com apenas um pouco de código.

Partes do CSS Grid, com foco na área do grid

Algumas das vantagens de usar áreas do CSS Grid, são:

  1. Fácil definição de posição das áreas da sua aplicação em diferente breakpoints;
  2. O código demonstra visualmente o layout que você está criando;
  3. Você pode referenciar os nomes das áreas em grid-column e grid-row;
  4. É possível definir “espaços em branco” de forma bastante clara.

Para criar áreas no grid usamos a propriedade grid-template-areas. A sintaxe do grid-template-areas é intuitiva: você só precisa usar strings que definem tanto os nomes das áreas quanto suas estruturas e posicionamento.

.container {
  display: grid;
  grid-template-areas:
    "content ads"
    "content suggested";
}

Quando definidos, os nomes das áreas podem ser usados em conjunto com as propriedades grid-column, grid-row, grid-area e outras para definir o posicionamento de itens no grid. É daí que vem o poder.

Índice

Criando e usando áreas no grid com grid-template-areas

Para aprender a usar o grid-template-areas, nós vamos usar o layout de um blog como exemplo. Um blog usando outro blog como exemplo, por quê não?

A página que vamos implementar é a página de um artigo. Nela temos o cabeçalho do site (header), o conteúdo (content), a barra lateral (sidebar) e o rodapé (footer). Para estruturar esse layout, vamos usar três strings organizadas da mesma forma que essas seções estarão dispostas na tela:

Exemplo de layout de uma página de artigo em um blog

.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "content sidebar"
    "footer  footer";
}

Essa definição já vai criar quatro áreas no contêiner grid: header, content, sidebar e footer. Da definição também saem as três linhas e as duas colunas. Não existe um limite definido de quantas linhas e colunas podemos criar dessa forma. A única regra é que cada área precisa ser um retânguloSe você tentar criar áreas em formatos de “T”, “L” ou “cruz”, aquela área será inválida. Exemplos de formatos inválidos para áreas no grid, including T, L e cruz.

Adicionando um HTML simples no projeto, podemos perceber que cada elemento ocupa cada coluna e linha em sequência, ignorando as áreas.

<main class="page">
  <header class="header">Cabeçalho</header>
  <article class="content">Conteúdo</article>
  <aside class="sidebar">Barra lateral</aside>
  <footer class="footer">Rodapé</footer>
</main>

Exemplo da posição incorreta dos elementos por não definir a área no grid que cada um ocupa

Isso acontece porque ainda não definimos a área que cada elemento vai ocupar.

Para definir qual elemento da sua página ocupará cada área do grid, usaremos a propriedade grid-area:

.header {
  grid-area: header;
}
.content {
  grid-area: content;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

Agora cada elemento está em sua área no grid. Vamos adicionar mais um pouco de CSS para estilizar essa página.

.page {
  min-height: 100vh;
}

.header,
.content,
.sidebar,
.footer {
  padding: 10px;
  font-size: 1.5rem;
}

.header {
  background: #0088ff;
}
.content {
  background: #6bc9bb;
}
.sidebar {
  background: #00b3a1;
}
.footer {
  background: #ff802e;
}

Já parece um pouco melhor, mas ainda precisamos definir o tamanho de cada área, para ter um layout que se assemelha à uma página de um artigo em um blog.

Definindo o tamanho de áreas no grid com grid-template-rows e grid-template-columns

Para definir o tamanho de linhas e colunas em um contêiner grid usamo grid-template-rows e grid-template-columns, como mostramos no post que cobrimos o básico que você precisa saber de CSS Grid. Quando usamos grid-template-areas não é muito diferente.

No nosso exemplo, nós temos três linhas e duas colunas. Então, basta definir o tamanho dessas linhas e colunas no nosso CSS:

.page {
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 3fr 1fr;
}

Resultado final de aplicar tamanho às áreas no grid

Qualquer valor válido para as propriedades grid-template-rows e grid-template-columns pode ser usado aqui. Isso é muito útil para criar layouts bem flexíveis e exatamente como queremos.

O contêiner grid continuará acomodando mais elementos que adicionarmos dentro dele também. Para controlá-los, podemos utilizar as técnicas de estilização da grid implícita.

Criando áreas em branco com ”.” no grid-template-areas

Vamos supor que nós queremos que uma parte do grid não faça parte de uma área. Talvez o rodapé da página deva ficar apenas embaixo do conteúdo, e não também embaixo da barra lateral. Para demarcar essas “áreas em branco”, podemos usar um . (ponto).

.page {
  grid-template-areas:
    "header  header"
    "content sidebar"
    "footer  .";
}

Resultado de adicionar um espaço em branco às áreas no grid

Design responsivo com áreas no grid e @media queries

Usando @media queries conseguimos mudar o valor de propriedades CSS em diferentes dispositivos e tamanhos de tela. Áreas no grid são muito úteis nesses casos — quando temos que reorganizar o layout de uma página.

Numa página de artigo em um blog, por exemplo, teríamos que acomodar a barra lateral (sidebar) abaixo do conteúdo (content) em telas pequenas. Para isso, usaríamos @media queries:

@media (max-width: 500px) {
  .page {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-rows: auto 1fr auto auto;
    grid-template-columns: 1fr;
  }
}

Resultado de usar @media queries para controlar as áreas no grid em diferentes tamanho de tela. À esquerda temos um layout em uma coluna, para telas com menos de 500px de largura. À direita, um layout com duas colunas, para telas com 500px ou mais de largura

Nessa @media query, mudamos o layout de .page para ter uma coluna e quatro linhas. Além de mudar o valor de grid-template-areas, também tivemos que alterar grid-template-rows e grid-template-columns.

Juntar @media queries e grid-template-areas é um super poder no CSS Grid, já que facilita muito a criação de layouts responsivos.

Linhas e colunas implícitas criadas com grid-template-areas

Quando criamos áreas no grid usando a propriedade grid-template-areas, são criados também nomes para linhas e colunas no nosso grid. Esses nomes seguem o padrão area-start e area-end para o começo e o término de cada área.

Exemplos dos nomes de linhas -start e -end

Esses nomes podem ser usados em propriedades como grid-column-start, grid-column-end, grid-row-start e grid-row-end. Podemos, então, definir que um elemento começa em uma parte da área e termina em outra área, por exemplo. Não ficamos limitados a usar apenas uma área por inteiro.

.popup {
  grid-column-start: content-start;
  grid-column-end: sidebar-end;
  grid-row-start: content-start;
  grid-row-end: span 1; /* podemos misturar nomes e unidades */

  /* Estilos extra */
  padding: 10px;
  font-size: 1.5rem;
  background: #ffffffaa;
}

Exemplo do popup estilizado com os nomes de linhas e colunas

Usando a “propriedade-atalho” grid-template

A propriedade grid-template-areas é só uma das formas de criar áreas em um grid. Temos também a “propriedade-atalho” grid-template. Com o grid-template conseguimos definir as áreas, o tamanho das colunas e o tamanho das linhas de uma vez só.

Em vez de usar grid-template-areas, grid-template-rows e grid-template-columns, podemos condensar tudo em um grid-template:

.page {
  display: grid;
  grid-template:
    "header  header" auto
    "content sidebar" 1fr
    "footer  footer" 1fr / 3fr 1fr;

  /* O que seria o equivalente a: */
  grid-template-areas:
    "header  header"
    "content sidebar"
    "footer  footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 3fr 1fr;
}

A sintaxe do grid-template para criar áreas no grid é parecida com grid-template-areas, só que ao lado de cada linha de áreas definimos o tamanho daquela linha (como faríamos com grid-template-rows). Ao final de tudo, adicionamos uma barra (/) e escrevemos os tamanhos das colunas (como faríamos com grid-template-columns).

grid-template pode ser utilizado de várias formas, não apenas como eu te mostrei agora. Se quiser aprender todas as formas disponíveis, dá uma olhada na página sobre grid-template no MDN.

Suporte do grid-template-areas em diferentes navegadores

O suporte dos navegadores para grid-area é muito bom, mais de 95% dos usuários da web no mundo. Como a especificação do CSS Grid é dividida em algumas partes, vale a pena checar o suporte de cada funcionalidade que você vai utilizar no caniuse.com.

É grande a chance de que suporte em navegadores não será um impeditivo para você.

Continue aprendendo

Esse é o último post de uma série que explora várias das funcionalidades do CSS Grid aqui no Triângulo. CSS Grid é muito poderoso e nos permite criar layouts de uma forma que antes não era muito prática com CSS.

Para escrever esse post eu usei o excelente artigo no MDN sobre grid-template-areas (developer.mozilla.org) e também a especificação do CSS Grid (drafts.csswg.org).

Bons estudos!