CSS Grid Lanes: masonry nativo no Safari

O layout masonry, aquela grade escalonada no estilo Pinterest em que itens de qualquer tamanho fluem para o espaço disponível, já está em produção há mais de uma década apoiado em bibliotecas JavaScript, floats e gambiarras de Flexbox que quase funcionam até que não funcionam mais.¹ Na WWDC 2026, a equipe do Safari da Apple deu à web um modo de layout nativo para isso: o CSS Grid Lanes. O padrão masonry é antigo. O que é novo é um tipo de display CSS de primeira classe que o produz em três linhas, mais um controle de flow-tolerance que resolve o crônico problema de ordem de tabulação e acessibilidade do masonry. O Grid Lanes está disponível hoje no Safari 26.4 e atrás de uma flag em outros navegadores.¹

TL;DR

• O Grid Lanes é um novo modo de layout CSS que fica entre Grid e Flexbox: ele estrutura um eixo e deixa o outro livre, distribuindo o conteúdo por várias lanes em um layout escalonado e densamente compactado que preserva as proporções naturais de cada item.¹
• Tudo se resume a três linhas: display: grid-lanes, grid-template-columns com trilhas em fr e gap. Troque grid-template-columns por grid-template-rows para transformar uma cascata em uma parede de tijolos. Você escolhe uma direção, não as duas.¹
• O dimensionamento de trilhas vem do Grid: proporções fr desiguais, auto-fill com minmax() para contagens de colunas responsivas e padrões repetidos de colunas estreitas/largas.¹
• Os itens usam propriedades do Grid que você já conhece: grid-column: span 2 para alargar, posicionamento explícito de colunas e grid-template-columns: subgrid para dobrar o conteúdo de um card dentro do layout pai. Você controla o posicionamento das colunas, não das linhas; o Grid Lanes decide a linha.¹
• O flow-tolerance é o diferencial decisivo. O posicionamento puro pela coluna mais curta pode fazer a ordem de tabulação ziguezaguear contra a ordem visual, prejudicando a acessibilidade. O flow-tolerance (padrão 1em) afrouxa a regra da coluna mais curta para que o posicionamento siga mais de perto a ordem de leitura.¹
• A disponibilidade é honesta: o Safari 26.4 já o entrega hoje, outros navegadores o mantêm atrás de uma flag. O Grid Lanes ainda não está em GA entre navegadores.¹

Onde o Grid Lanes fica entre Grid e Flexbox

Brandon, da equipe do Safari, constrói um layout Grid Lanes do zero, começando em 3:39.

Todo modo de layout responde às mesmas duas perguntas: para onde vão os itens e quanto espaço eles recebem.¹ Flexbox e Grid respondem de formas diferentes, e o Grid Lanes fica no meio.

O Flexbox dá a você um eixo e uma única lane de itens fluindo ao longo dele; quando os itens quebram, eles continuam fluindo na direção escolhida, linha ou coluna.¹ O Grid dá dois eixos, colunas e linhas, e posiciona os itens em células na interseção dessas trilhas. O problema aparece quando os itens têm proporções diferentes: você acaba com grandes áreas vazias onde itens mais curtos não conseguem preencher suas células.¹ Para imagens, isso deixa três opções ruins. Estique cada imagem para preencher sua célula e você a distorce; dê zoom para preencher o espaço e a imagem transborda seu contêiner; recorte-a e você corre o risco de perder informações importantes.¹

O Grid Lanes resolve essa tensão. Como a sessão coloca: “Ele fica entre Grid e Flex. Em vez de estruturar em duas dimensões como o Grid, ele estrutura apenas uma e deixa a outra livre. Mas, diferentemente do Flex, onde o conteúdo flui em uma única lane e quebra para baixo na página, o Grid Lanes distribui o conteúdo por várias lanes.”¹ Os itens são posicionados um a um, e cada um cai na coluna que o deixa mais próximo do topo, e é por isso que os itens anteriores ficam mais altos e os posteriores preenchem abaixo.¹ O layout funciona com qualquer conteúdo, não só imagens: blocos de texto quebram para caber em sua coluna e o navegador dimensiona as alturas, e um título pode se estender por várias colunas para se destacar.¹

Masonry nativo em três linhas de CSS

A construção começa com um novo tipo de display e então define as trilhas da mesma forma que o Grid faz:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns define o número de trilhas e a largura de cada uma. A unidade fr (“unidade fracionária”) diz ao navegador para pegar o espaço disponível no contêiner e dividi-lo em frações, então 1fr 1fr 1fr produz três colunas de tamanho igual, e gap adiciona o espaçamento exatamente como faz no Grid.¹ Para transformar a cascata em uma parede de tijolos, troque as colunas por linhas: substitua grid-template-columns por grid-template-rows e os itens fluem ao longo em linhas em vez de para baixo em colunas. O único detalhe, nas palavras da sessão: “você escolhe uma direção - não as duas.”¹

Essas três linhas dão mais controle do que parecem. As colunas não precisam ser iguais: uma coluna central pode ocupar o dobro do espaço de suas vizinhas. Em vez de fixar você mesmo a contagem de colunas, você pode deixar o navegador decidir, da mesma forma que os layouts Grid responsivos já fazem:

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

auto-fill cria tantas colunas quantas couberem, e minmax() diz que cada uma deve ter pelo menos 200 pixels, mas pode crescer para preencher o espaço.¹ Você pode levar a mesma ideia adiante com um padrão repetido de colunas estreitas e largas. O ganho que Brandon ressalta: “o que eu mais amo é o quanto você consegue fazer com só algumas linhas de CSS.”¹

Moldando itens individuais com propriedades do Grid que você conhece

O Grid Lanes molda os itens com propriedades que já existem no Grid. Comece a partir de um contêiner grid-lanes com três colunas iguais. Para dar mais espaço a um item, grid-column: span 2 o estica por duas colunas e o resto do layout se ajusta ao redor dele.¹ Você também pode posicionar um item com exatidão: defina que ele comece na coluna 2 e se estenda pelas colunas 2 e 3. A restrição é deliberada: “você pode controlar o posicionamento da coluna, mas não da linha. O Grid Lanes decide a linha por você.”¹

O subgrid dobra o conteúdo de um componente aninhado dentro do pai. Um card de receita que se estende por duas colunas contém uma imagem e algum texto que, por padrão, não participam do layout Grid Lanes. Adicione display: grid-lanes e grid-template-columns: subgrid ao card, e “seu conteúdo se junta ao layout pai como itens próprios”: a imagem ocupa uma coluna, o texto ocupa a outra, cada um dimensionado conforme seu conteúdo.¹ O aninhamento funciona em qualquer direção, uma grade regular dentro de um contêiner Grid Lanes ou o contrário, porque as mesmas ferramentas e a mesma sintaxe se mantêm.¹

O controle flow-tolerance: a correção de acessibilidade

Aqui está a parte que faz do Grid Lanes mais do que um masonry mais arrumado. O posicionamento puro pela coluna mais curta fica ótimo na maioria das vezes, mas às vezes não parece exatamente certo, e a razão é a acessibilidade.¹

Imagine dois itens em uma linha com quase a mesma altura, onde o item 2 é alguns pixels mais curto que o item 1. A área sob o item 2 fica mais perto do topo, então o navegador posiciona o próximo item ali, e o item 4 preenche a primeira coluna. O resultado visual lê-se da esquerda para a direita na primeira linha e da direita para a esquerda na última. Como a sessão coloca: “A diferença entre a ordem de tabulação e como o conteúdo aparece visualmente vai impactar a acessibilidade para as pessoas e pode criar uma experiência confusa.”¹ A ordem de tabulação segue a ordem do código-fonte; o posicionamento visual em ziguezague quebra a correspondência da qual usuários de teclado e leitores de tela dependem.

O flow-tolerance é o controle que afrouxa ou aperta a regra da coluna mais curta.¹ Com ele ativado, para cada novo item o navegador pergunta: “a coluna mais alta é menor que a coluna mais curta mais o flow-tolerance?”¹ Se a diferença está dentro da tolerância, o item preenche a coluna que mantém o posicionamento alinhado à ordem de leitura; quando a diferença cresce demais para ser ignorada, o item cai na coluna genuinamente mais curta. O valor padrão é 1em:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

A orientação da Apple é “experimentar diferentes valores de flow-tolerance para encontrar o que funciona para o seu conteúdo.”¹ O outro lado de dar flexibilidade ao navegador é que o resultado pode ocasionalmente surpreender você, e quando isso acontece, o Web Inspector tem suporte completo para o Grid Lanes: ative a sobreposição e você obtém linhas para colunas e linhas, números de ordem projetados sobre cada item para que você veja exatamente como o posicionamento aconteceu, e os gaps desenhados entre os itens.¹

Principais conclusões

Para desenvolvedores frontend: - Substitua bibliotecas JavaScript de masonry e gambiarras de Flexbox por display: grid-lanes, três trilhas fr e gap; reutilize as ferramentas de dimensionamento de trilhas do Grid (auto-fill, minmax(), fr desiguais) que você já conhece.¹ - Recorra a grid-column: span N e ao posicionamento explícito de colunas para destacar itens, e a grid-template-columns: subgrid para dobrar o conteúdo de cards aninhados dentro do layout pai.¹

Para equipes atentas à acessibilidade: - Ajuste o flow-tolerance (padrão 1em) para que o posicionamento visual acompanhe a ordem do código-fonte e a ordem de tabulação, fechando a lacuna que o posicionamento masonry em ziguezague abre para usuários de teclado e leitores de tela.¹ - Verifique o posicionamento com a sobreposição Grid Lanes do Web Inspector, que projeta os números de ordem dos itens diretamente sobre o layout.¹

Para líderes técnicos planejando a adoção: - Trate o Grid Lanes como disponível-no-Safari-26.4, atrás de flag nos demais, não em GA entre navegadores; entregue-o como um aprimoramento progressivo com um fallback gracioso para navegadores ainda atrás da flag.¹

FAQ

O que é o CSS Grid Lanes?

O CSS Grid Lanes é um novo modo de layout que a equipe do Safari apresentou na WWDC 2026 para construir layouts no estilo masonry de forma nativa. Ele fica entre Grid e Flexbox: estrutura um eixo e deixa o outro livre, distribuindo os itens por várias lanes em um layout escalonado e densamente compactado que preserva as proporções naturais de cada item.¹

Como eu construo um layout masonry com o Grid Lanes?

Três linhas de CSS: defina display: grid-lanes, defina as trilhas com grid-template-columns usando unidades fr (por exemplo 1fr 1fr 1fr para três colunas iguais) e adicione um gap. Troque grid-template-columns por grid-template-rows para transformar uma cascata vertical em uma parede de tijolos horizontal. Você escolhe uma direção, não as duas.¹

O que o flow-tolerance faz?

O flow-tolerance afrouxa ou aperta a regra que posiciona cada item na coluna mais curta. O posicionamento puro pela coluna mais curta pode fazer a ordem visual ziguezaguear para longe da ordem de tabulação, o que prejudica a acessibilidade. Com o flow-tolerance ativado, o navegador verifica se a coluna mais alta é menor que a coluna mais curta mais a tolerância antes de decidir o posicionamento, mantendo os itens alinhados à ordem de leitura até que a diferença de altura cresça demais. O valor padrão é 1em.¹

Posso usar o Grid Lanes em produção hoje?

No Safari 26.4 ele já está disponível. Outros navegadores o mantêm atrás de uma flag, então o Grid Lanes ainda não está em GA entre navegadores. Entregue-o como um aprimoramento progressivo com um fallback para navegadores que ainda exigem a flag.¹

O Grid Lanes funciona com as propriedades do Grid que eu já conheço?

Sim. O posicionamento no nível do item usa propriedades existentes do Grid: grid-column: span 2 alarga um item, o posicionamento explícito de colunas o posiciona, e grid-template-columns: subgrid dobra o conteúdo de um componente aninhado dentro do layout pai. Você controla o posicionamento das colunas; o Grid Lanes decide a linha.¹

Para uma referência prática quando você começar a construir, o WebKit mantém um guia de campo oficial sobre o Grid Lanes em gridlanes.webkit.org. O painel observou que o Grid Lanes compõe com o novo customizable select: um layout masonry funciona dentro de um drop-down ::picker(select).²

O Grid Lanes é o tipo de adição de plataforma que elimina uma dependência em vez de adicionar uma, que é todo o argumento do no-build manifesto e um caminho direto para o tipo de resultado registrado no relato da pontuação perfeita no Lighthouse. Entregar layout nativo e semântico em vez de grades renderizadas por JavaScript também mantém sua marcação legível para máquinas, o argumento defendido em HTML is the format agents want. O hub completo da série é a Apple Ecosystem Series.

Referências