Áreas de Grid no CSS

Introdução

• O CSS Grid é compatível com todos os principais navegadores desde 2017
• Porém, mesmo em 2024, muitas pessoas ainda não usam o recurso grid-template-areas
• Este artigo busca explicar a simplicidade e o poder de grid-template-areas

Áreas de grid nomeadas no CSS

• No CSS Grid, cada área da grade pode receber um nome e ser referenciada em todo o CSS
• Por exemplo, é possível definir um layout de grade com duas colunas e mapear grid-area para cada item

Regras das áreas de template da grade

• As áreas definidas precisam ter formato retangular
• Todas as áreas devem ser definidas

Sintaxe de template da grade

• A propriedade grid-template-areas deve ser usada para definir as áreas da grade
• É possível usar várias strings de área
• Uma única string indica um layout unidimensional, e várias strings indicam um layout multidimensional

Linhas de grid nomeadas no CSS

• As linhas da grade podem receber nomes exclusivos
• Por exemplo, em uma grade com 3 colunas, é possível dar nome a cada linha
• As linhas de grid nomeadas não substituem a numeração padrão das linhas

Casos de uso de áreas de template da grade

• Inversão da direção da grade: usando grid-template-areas, é possível mudar facilmente a direção do layout
• Layout de cabeçalho: usando grid-template-areas, é possível definir o layout do cabeçalho e torná-lo responsivo
• Layout editorial: é possível definir e alterar facilmente layouts que incluem vários tipos de conteúdo

Layout condicional e CSS :has()

• Usando o seletor CSS :has(), é possível alterar o layout conforme a presença de elementos

Suporte multilíngue (LTR/RTL)

• O CSS Grid ajusta o layout de acordo com a direção da página (LTR ou RTL)
• Isso significa que as áreas de grid nomeadas também seguem a direção da página

Áreas de grid e DevTools

• Todos os principais navegadores oferecem boas ferramentas para áreas de grid (Chrome, Safari, Firefox)
• Cada navegador tem uma forma diferente de visualizar as áreas de grid

Resumo do GN⁺

• O recurso grid-template-areas do CSS Grid é útil para entender e gerenciar layouts visualmente
• Ele é especialmente útil quando membros da equipe precisam alterar o layout
• Este artigo explica a simplicidade e o poder de grid-template-areas, com o objetivo de incentivar mais pessoas a usar esse recurso
• Um outro projeto com funcionalidade semelhante é o Flexbox

[GN⁺]

Opiniões do Hacker News

• O demo de animação chamou a atenção, mas não foi implementado com CSS

  • Aprendeu Flexbox e ficou satisfeito, sem sentir necessidade de aprender Grid
  • Há razões para preferir Grid, mas na prática não sentiu necessidade
  • Para tabelas de dados, usa tabelas de verdade

• Este artigo destaca as vantagens do Grid e a verbosidade da sintaxe do CSS

  • Há duas dimensões e três parâmetros (início, fim, tamanho)
  • Existem pelo menos três formas de declarar cada parâmetro
  • As propriedades abreviadas dificultam a leitura
  • É difícil ler Grid escrito por outros desenvolvedores

• 1/3 não é uma fração, mas um intervalo de 1 a 3

  • Não consegue entender por que essa sintaxe foi escolhida
  • Existem sintaxes melhores para representar intervalos em programação (ex.: 1..3)

• Sobre Grid Garden e Flexbox Froggy

  • Grid Garden
  • Flexbox Froggy

• Não entendia Grid nem Flexbox

  • A última estratégia de layout que usou bem foi floats
  • Este artigo lhe deu confiança para usar CSS Grid no próximo design de layout
  • Agradece pelo artigo bem feito

• Pergunta se existe uma versão introdutória anterior deste documento

  • Se perdeu na parte introdutória
  • Não entendeu o que é line number
  • Travou nas “frações” como 1/3 e 1/4

• Recomenda fortemente Mondrian with auto flow, de Jen Simmons

  • Jen Simmons Mondrian
  • Fica muito legal ao redimensionar a janela
  • Quer entender como o auto flow detecta e preenche espaços

• Pergunta por que a sintaxe é definida como 1/2 e 3/4

  • Algo como 1-2 ou 1->2 pareceria mais fácil de entender

• Gosta de posts de blog interativos

  • Recomenda experimentar áreas de Grid em uma ferramenta
  • Usa o Grid Layoutit há alguns anos, e ajustar espaçamentos ficou bem mais fácil

• Acha que entendeu CSS Grid pela primeira vez

  • A numeração ajudou bastante
  • É um ótimo artigo e pretende consultá-lo com frequência