Grid Lanes e fit-tolerance: come evitare che il Tab salti da una colonna all'altra

Chi ha costruito una griglia di card di altezze diverse, in stile Pinterest, sa che di solito si finisce con una libreria JavaScript o con le colonne CSS, che dispongono gli elementi per colonna e non per riga. CSS Grid Lanes è la proposta nativa per questo problema, ed è già disponibile in Safari.

Con la release 27.2 una sua proprietà cambia nome, e il motivo del cambio spiega anche una cosa che spesso si trascura: l'ordine in cui il Tab attraversa i contenuti.

Come funziona, in breve

Secondo l'introduzione di WebKit, Introducing CSS Grid Lanes (Jen Simmons, Elika Etemad e Brandon Stewart, 19 dicembre 2025), si applica display: grid-lanes al contenitore e si definiscono le corsie con grid-template-columns (oppure grid-template-rows per l'altra direzione). Gap, spanning e posizionamento usano le proprietà di Grid già note. Questo è l'esempio base dell'articolo:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Il browser colloca ogni elemento nella corsia in cui finisce più vicino alla cima del contenitore, in modo simile alla libreria Masonry. Il post paragona il meccanismo ad auto che cambiano corsia per portarsi il più avanti possibile. Grid Lanes è arrivato in Safari 26.4, a marzo, come ricorda il post su Safari 27.2.

Che cosa fa fit-tolerance

Qui entra la proprietà di cui parla Safari 27.2. Il post del 26 ottobre 2026 spiega che il CSS Working Group ha rinominato flow-tolerance in fit-tolerance, per descrivere meglio ciò che la proprietà fa. Il nome vecchio funziona ancora come alias deprecato, per ora, e WebKit invita ad aggiornare presto. Il Web Inspector di Safari può segnalare cosa va cambiato. Secondo l'introduzione, la stessa proprietà si era chiamata prima item-tolerance.

Il valore predefinito è 1em. Con tolleranza zero, il browser mette ogni elemento nella corsia che finisce più in alto. Con una tolleranza, le corsie i cui punti finali stanno entro quella distanza vengono considerate pari, e il browser sceglie la prima. In altre parole, la tolleranza decide quanto è selettivo il browser nel scegliere dove va l'elemento successivo.

Perché conta per la tastiera

Un'indicazione pratica del post su Safari 27.2: un valore più alto mantiene gli elementi consecutivi in corsie vicine, invece di farli saltare da una parte all'altra della pagina per differenze di altezza minime. Questo migliora la navigazione con il Tab, in particolare per chi usa la tastiera guardando lo schermo. Secondo WebKit la maggior parte dei siti dovrebbe alzare il valore in modo significativo, e il valore giusto dipende da quanto variano le dimensioni dei contenuti.

L'introduzione del dicembre 2025 aggiunge due avvertenze: una tolleranza troppo alta può creare salti scomodi nel layout, una troppo bassa muove il focus avanti e indietro senza necessità. L'articolo lo collega all'ordine del focus e agli utenti di screen reader. Per scegliere il valore, WebKit offre una demo interattiva, il Field Guide to Grid Lanes, dove si può sperimentare con fit-tolerance.

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  fit-tolerance: 4em; /* valore d'esempio: va calibrato sul tuo contenuto */
}

Il valore 4em qui sopra è illustrativo: le fonti non indicano un numero consigliato, solo che il default può essere troppo basso. Il codice non è stato eseguito.

Come provarlo oggi

Un test pratico, che deriva da quanto dicono le fonti ma è una mia proposta di metodo: carica una griglia con card di altezze molto diverse, attraversala con il Tab dall'inizio alla fine, e osserva se il focus segue un percorso che l'occhio riesce a prevedere. Poi ripeti con valori diversi di fit-tolerance nel Field Guide, e scegli quello in cui i salti sono più rari senza che le card si dispongano in modo troppo irregolare.

Supporto e fallback

Qui le fonti sono scarne. L'introduzione di WebKit non parla di fallback né di miglioramento progressivo per i browser privi di supporto, e non fa affermazioni sugli altri browser. Il CSS Working Group ha inoltre decisioni ancora aperte, tra cui il modo in cui verrà controllato esplicitamente l'orientamento del flusso. La scheda di Web Features Explorer consultata oggi indica "disponibilità limitata" e non riporta versioni, e lo mostra non supportato anche in Safari, in contrasto con WebKit: la considero poco aggiornata e non la uso come prova. Non ho potuto verificare lo stato di Chrome e Firefox da una fonte primaria.

Come impostazione prudente, e solo come mia indicazione non testata, si può scrivere prima una disposizione con CSS Grid o colonne, e poi sostituirla dentro @supports (display: grid-lanes). Un caso va tenuto presente: le colonne CSS ordinano per colonna e non per riga, quindi il fallback cambia a sua volta l'ordine di lettura e del focus rispetto a Grid Lanes. Vale la pena testarlo con la tastiera in entrambe le versioni.

Quando ha senso adottarlo

Se oggi usi una libreria masonry e il tuo pubblico è in gran parte su Safari, la migrazione vale una prova. Se il tuo pubblico è prevalentemente su altri browser, per ora Grid Lanes resta una funzione da seguire e da usare come miglioramento. In ogni caso, chi ha già scritto flow-tolerance nei suoi CSS dovrebbe passare a fit-tolerance prima che l'alias venga rimosso: WebKit lo definisce deprecato, senza una data.

Limiti di questo articolo

Il codice non è stato eseguito. Lo stato di supporto fuori da Safari non è verificato. I consigli sul fallback e sul metodo di test sono interpretazioni mie.

Fonti

1. WebKit Blog, Jen Simmons, “WebKit Features for Safari 27.2”, 26/10/2026
2. WebKit Blog, Jen Simmons, Elika Etemad, Brandon Stewart, “Introducing CSS Grid Lanes”, 19/12/2025
3. WebKit, “Field Guide to Grid Lanes”, consultato il 02/11/2026
4. Web Features Explorer, “Grid lanes”, consultato il 02/11/2026