Resumo

  • O primeiro rascunho público de Grid Layout do W3C, de abril de 2011, apontou tabelas, JavaScript e flutuantes medidos com precisão como soluções frágeis para o desenho de aplicações web.
  • O texto de Recomendação Candidata de dezembro de 2017 descreveu contêineres, trilhas, linhas, áreas nomeadas, tamanho flexível e posicionamento automático, deixando a estrutura de conteúdo no HTML.

A mesa de jantar parecia exausta. Fora contratada para alinhar dados; logo sustentava cabeçalho, barra lateral, matéria, cartões e rodapé. Os elementos flutuantes entravam como escoras, e JavaScript aparecia com fita métrica para tampar os vãos. Bastava reduzir a janela para o edifício balançar. A mesa não tinha culpa de receber o projeto errado.

O primeiro rascunho público de Grid Layout do W3C, de 7 de abril de 2011, descreveu esses arranjos. Aplicações web precisavam de regiões maiores e relações mais complexas; autores combinavam tabelas, scripts e cálculos minuciosos com elementos flutuantes. A mudança do espaço disponível tornava o resultado frágil. Fixar a largura resolvia um problema e criava outro: sobra num monitor, aperto num telefone.

A proposta repartia o espaço de apresentação em linhas e colunas e permitia colocar partes da página pelas linhas da grade. A distinção de uma tabela de dados estava no sentido. Linhas e células de uma tabela são estrutura do conteúdo. Na grade de layout, linhas e colunas organizam a aparência. Uma barra lateral pode ficar ao lado da reportagem sem transformar a reportagem numa célula de uma planilha imaginária.

O vocabulário do primeiro desenho ainda mudaria. Os exemplos de 2011 usavam nomes como grid-columns e grid-rows, diferentes da sintaxe consagrada depois. O esboço não é a planta final da obra. O que atravessou as revisões foi a possibilidade de declarar trilhas, limites, posições e medidas que respondessem ao espaço real em vez de a um único número de pixels.

No texto de Recomendação Candidata do W3C de 14 de dezembro de 2017, CSS Grid Level 1 descreve o contêiner e seus itens. O autor define trilhas horizontais e verticais, dá nomes a linhas ou áreas, posiciona o que precisa de endereço certo e deixa outros itens para a colocação automática. Trilhas podem ser fixas ou flexíveis; a unidade fr reparte espaço livre. A página ganha regras de planta em vez de coordenadas pregadas a uma tela específica.

A colocação automática é valiosa para uma coleção que cresce. Um cartão novo entra e o navegador procura o próximo espaço segundo o fluxo indicado, criando trilhas implícitas quando necessário. O editor escolhe a lógica do salão; o navegador acomoda os convidados. O décimo terceiro cartão deixa de exigir obras emergenciais.

Grid pensa em duas direções ao mesmo tempo. Um cabeçalho pode atravessar várias colunas, a navegação ocupa uma faixa e painéis se alinham abaixo. Há outras ferramentas para outros tipos de fluxo; esta resolve a distribuição das salas de uma página. A mesa não precisa fingir que é a fundação da casa.

Mover peças na tela traz uma obrigação editorial. A posição visual pode mudar enquanto a ordem dos elementos no HTML continua guiando outras formas de leitura e navegação. O documento de 2017 trata dessa diferença. Colocar a conclusão no canto superior não adianta a explicação que vem antes dela no texto. A decoração pode andar; o percurso de leitura deve continuar lógico.

O histórico de publicação do W3C para CSS Grid Layout Level 1 registra o rascunho de abril de 2011 e as etapas candidatas de 2016 e 2017. Os documentos mostram uma necessidade prática tornando-se um modelo detalhado de trilhas, áreas e distribuição flexível.

O leitor raramente pergunta quantas linhas definem uma barra lateral. Percebe quando ela espreme a matéria no celular ou quando os cartões se amontoam. Grid permitiu ao publicador entregar uma planta e ao navegador adaptá-la ao terreno encontrado. A mesa voltou a apoiar uma xícara — trabalho em que nunca falhou.