CSS Grid Lanes

 (webkit.org)
6 pontos por GN⁺ 2025-12-20 | 2 comentários | Compartilhar no WhatsApp
  • Um novo recurso de CSS, Grid Lanes, foi introduzido no Safari Technology Preview 234 para implementar layouts masonry na web
  • Com a propriedade display: grid-lanes, é possível montar uma grade responsiva sem media queries, com definição flexível de colunas usando grid-template-columns
  • A propriedade item-tolerance permite ajustar a sensibilidade do posicionamento dos itens, reduzindo desequilíbrios visuais causados por diferenças no tamanho do conteúdo
  • Suporta tanto direção por colunas quanto por linhas, com o fluxo sendo definido automaticamente conforme grid-template-columns ou grid-template-rows
  • O CSS Working Group ainda está discutindo alguns nomes de propriedades, e a equipe do WebKit está tocando a padronização e a implementação em paralelo, incentivando testes por parte dos desenvolvedores

Visão geral do CSS Grid Lanes

  • Grid Lanes é um novo modo de exibição para implementar layouts no estilo masonry na web com CSS nativo
    • Usa display: grid-lanes com uma sintaxe semelhante à do grid tradicional
    • grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) cria colunas flexíveis com largura mínima de 250px
  • A propriedade gap define o espaçamento entre os itens, atendendo a todos os tamanhos de tela sem precisar de media queries
  • Já pode ser testado no Safari Technology Preview 234, com uma página de demos fornecida pelo WebKit

Como o Grid Lanes funciona

  • O navegador posiciona automaticamente cada item na coluna mais próxima do topo
    • De forma semelhante ao Masonry.js, o próximo item é adicionado à coluna atualmente mais curta
    • Ao navegar com Tab, o usuário pode percorrer horizontalmente o conteúdo visível no momento
  • Em carregamento de conteúdo com rolagem infinita, o alinhamento automático funciona sem JavaScript

Recursos estendidos do CSS Grid

  • Variação no tamanho das lanes: a sintaxe grid-template-* permite alternar entre colunas estreitas e largas
    • Exemplo: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
  • Suporte a expansão de itens (span)
    • É possível fazer um item ocupar várias colunas (grid-column: span 4, por exemplo)
    • Demo de exemplo: layout no estilo de artigo de jornal
  • Também permite posicionamento explícito
    • Exemplo: header { grid-column: -3 / -1; } para fixar o cabeçalho nas colunas finais

Recurso de mudança de direção

  • Suporta tanto layout baseado em colunas (waterfall) quanto baseado em linhas (brick)
    • Ao definir grid-template-columns, ele usa direção por colunas; ao definir grid-template-rows, usa direção por linhas automaticamente
  • grid-auto-flow: normal é o valor padrão, e o navegador decide automaticamente com base na direção definida
  • O CSS Working Group está discutindo nomes de propriedades para controle do fluxo, como grid-lanes-direction
    • A discussão relacionada está acontecendo em uma issue do GitHub CSSWG-drafts

Ajuste da sensibilidade de posicionamento: item-tolerance

  • item-tolerance define com que rigor as diferenças de tamanho entre os itens são tratadas durante o posicionamento
    • O valor padrão é 1em; diferenças menores que isso são consideradas como a mesma altura
    • Quanto maior o valor, menos os itens se deslocam lateralmente; quanto menor, mais fino é o ajuste de posição
  • Do ponto de vista de acessibilidade, é importante definir um valor apropriado para minimizar saltos visuais ao navegar com Tab
  • O nome da propriedade está definido atualmente como item-tolerance, mas pode mudar para flow-tolerance ou pack-tolerance

Exemplos de teste e uso

  • O Safari Technology Preview 234 oferece várias demos
    • Galeria de fotos, artigos em estilo jornal, site de museu, layout de mega menu, entre outros
  • Exemplo de código: 
    .container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}
  • É útil não apenas para imagens, mas também para rodapés ou menus com muitos links

Próximos passos

  • O CSS Working Group está decidindo os nomes de propriedades restantes
  • A equipe do WebKit está tocando em paralelo a implementação e a padronização desde meados de 2022
  • Os desenvolvedores são incentivados a criar demos e enviar feedback
    • Jen Simmons está coletando opiniões via Bluesky e Mastodon
  • A sintaxe básica já está estabilizada, então está pronta para aplicação em projetos reais

Leituras relacionadas

2 comentários

 
shakespeares 2025-12-21

Então vamos ter que usar grid-lanes separado para o Safari e grid para o Firefox. Façam isso se alinhar a um padrão web, por favor...
 
GN⁺ 2025-12-20
Comentários no Hacker News

  • Palmas para a equipe do Safari. Foi realmente surpreendente ver o navegador saltar de repente para o topo do ranking do Interop 2025 em outubro

    • Depois do iOS 26, deu para sentir que o Safari recebeu uma enorme atualização de recursos web. Além do WebGPU, preencheram as partes que faltavam da OPFS API, então agora ela já pode ser usada na prática. Além disso, também adicionaram a propriedade CSS field-sizing, resolvendo o problema de fazer campos de texto crescerem automaticamente de acordo com o conteúdo digitado
    • O Safari tende a ser visto como “o melhor navegador” sempre que sai uma grande versão, mas fora desses momentos costuma receber muitas críticas. Acho que isso acontece porque outros navegadores fazem atualizações contínuas, enquanto o Safari segue um ciclo de lançamentos mais tradicional
    • Na verdade, não é tão surpreendente assim. Já faz alguns anos que venho observando a equipe do Safari lançar de forma consistente recursos modernos de HTML e CSS
    • Enquanto a equipe do Chrome promove recursos experimentais como WebPCIe, o Safari vem entregando recursos que os usuários realmente querem. Por exemplo, deu suporte muito antes a coisas como efeitos de fundo desfocado
    • Ainda assim, é uma pena que o Safari continue sem suporte a wasm de 64 bits. Na lista de recursos do WebAssembly, consta como “100% suportado”, mas na prática ainda faltam partes importantes

  • Espero que o recurso CSS Gap Decorations chegue logo. Já cansei de continuar usando gambiarras desnecessárias para criar divisórias bonitas entre itens de flex ou grid

    • Que tal usar tabelas? Elas já estão muito melhores do que antigamente, mas a gente continua querendo cada vez mais. O ser humano parece incapaz de ficar satisfeito

  • Usei layout Masonry em um projeto recente, e o desempenho é razoável, mas por ser baseado em absolute positioning acaba sendo bem gambiarra. Você precisa conhecer antes a proporção dos objetos e recalcular tudo ao redimensionar. Por isso, espero que o suporte nativo chegue logo

    • Penso o mesmo. Estou esperando o CSS resolver isso e também esperando o dia em que poderei remover os últimos 1,3 KB de JavaScript da minha homepage, algo que aguardo desde 2019. Agradeço a todos que estão trabalhando nesse recurso

  • Esses anúncios são legais, mas têm algo de comédia trágica. Como a Apple não atualiza o navegador continuamente, ainda vai demorar bastante até o ponto em que dê para confiar e usar esses novos recursos de verdade

  • O layout Masonry é bonito de ver, mas acho difícil ter uma noção do conjunto das imagens de uma vez só

    • Grande parte do “design” web está focada mais na aparência do que na usabilidade. Quase ninguém realmente usa o produto; só veem uma animação de scroll e dizem “uau, que legal”
    • Quando as imagens são todas horizontais ou todas verticais funciona bem, mas quando estão misturadas o layout vira uma bagunça

  • Fico pensando por que não chamaram isso de Masonry. Ainda assim, o nome grid-lanes é descritivo e fácil de entender

  • Fico curioso para saber quanto tempo vai levar para os LLMs aprenderem com precisão essa nova sintaxe de CSS

  • Se eu tiver que olhar para uma página web feita de uma grade de texto com tamanhos e posições arbitrários, prefiro que alguém me dê um tiro
    Imagem de demonstração de grid em estilo jornal

    • Nunca leu um jornal?
    • Eu acho esse tipo de design bom. Dá para implementar na web um layout assimétrico, mas eficiente como o de um jornal
    • Mas sinto que isso viola princípios básicos do design, como alinhamento e agrupamento
    • Engraçado, eu acho isso realmente muito legal
    • O NYTimes.com me vem à cabeça exatamente como exemplo disso

  • Pessoalmente, odeio layouts em lanes. É difícil examinar todos os elementos de uma lista em ordem, e o olhar fica pulando para cima e para baixo, o que gera fadiga cognitiva

    • Mas se não for necessário examinar todos os elementos de forma sistemática, layouts em lanes podem funcionar bem. Para sites em que o conteúdo deve ser absorvido de relance, como o Pinterest, isso faz sentido
    • É bonito de ver, mas desconfortável para uso mais profundo
    • O objetivo não é eficiência, e sim permitir ver o conjunto de uma vez, como em jornais ou galerias de fotos
    • É irônico o recurso aparecer quando a moda já está acabando. Em termos de UX não é grande coisa, mas visualmente é bonito
    • Passa uma sensação de design de hemisfério direito. Combina com sites como Pinterest ou Home Assistant

  • Acho que a Apple deveria permitir baixar o Safari de forma estável em todas as plataformas

    • Lembro de ter instalado o Safari no Windows XP. Pelo visto, ainda não passou tempo suficiente desde aquele fracasso
    • Mas talvez isso seja possível indiretamente. O novo navegador da Kagi usa WebKit e, embora por enquanto seja exclusivo do macOS, está previsto que uma versão para Windows eventualmente também seja lançada