Bordi Interni alla Griglia in Webflow: Responsive e Accessibili

Aggiungi bordi interni puliti e consistenti a una griglia in Webflow senza una singola combo class né workaround — bastano un gap minimo e un background color. Webflow non ha un controllo “bordo interno” nativo, ma non ti serve: riduci il gap della griglia a un filo, colora la griglia dietro, e gli spazi tra le celle si leggono come linee divisorie nette. Funziona con immagini, testo e collezioni CMS allo stesso modo.

Il punto è che quelle linee sono in realtà lo sfondo della griglia che traspare, quindi la tecnica vive o muore sul rendere ogni cella completamente opaca e ogni spazio residuo riempito. È lì che sta il vero lavoro — gestire le proporzioni diverse delle immagini, la cella vuota che ottieni quando togli una colonna, e l’accessibilità delle scatole invisibili che aggiungi per rattopparla.

Niente di pesante. Poche proprietà fanno la parte visiva, e un paio di scelte semplici tengono tutto responsive e amichevole con gli screen reader.

Come funziona

Il bordo è un’illusione. Imposti il gap della griglia a 1px invece dei soliti 16, poi dai un background-color alla griglia stessa. Ora l’unico punto in cui quel colore è visibile sono i solchi da 1px tra le celle — e questo si legge come un bordo sottile e perfettamente uniforme tra ogni elemento. Cambi il gap e cambi lo spessore del bordo; cambi lo sfondo e cambi il colore della linea. Questa è tutta la base.

Siccome il “bordo” è solo lo sfondo della griglia che traspare, l’effetto si rompe nel momento in cui una cella non è completamente opaca. Le immagini con proporzioni diverse non riempiono le loro celle in modo uniforme, quindi i solchi sembrano irregolari — la soluzione è impostare ogni immagine a width: 100%, height: 100% e object-fit: cover, così riempie la sua cella senza distorsione. Gli elementi di testo non hanno uno sfondo proprio (la loro scatola è di fatto trasparente), quindi il colore della griglia invade lo spazio dietro di loro; dare alle celle di testo un background solido che corrisponde all’area attorno alla griglia ripristina l’effetto.

La responsività è dove si concentrano i tranelli. Se passi da tre colonne a due su un breakpoint più piccolo e hai un numero dispari di elementi, l’ultima cella resta vuota e lo sfondo della griglia traspare. La rattoppi con una cella placeholder il cui sfondo corrisponde all’area circostante — ma un placeholder è un elemento in più, quindi sui breakpoint più larghi (ancora a tre colonne) sfora su una nuova riga e rivela una striscia di sfondo. La risposta è controllare il display del placeholder per breakpoint: nascondilo dove non serve, mostralo solo dove altrimenti una cella resterebbe vuota. Tieni a mente la cascata di Webflow — un valore impostato su un breakpoint più grande scende verso quelli più piccoli finché non lo sovrascrivi, quindi ricontrolla ogni breakpoint sotto a quello in cui il placeholder compare.

Quel placeholder vuoto è anche un tranello di accessibilità. È invisibile agli utenti vedenti, ma gli screen reader non ignorano in automatico le scatole vuote dentro una struttura di contenuto come una griglia — possono annunciarla come un elemento privo di significato e di contesto. Aggiungere aria-hidden="true" al placeholder dice alle tecnologie assistive di saltarlo del tutto: non annunciato, non focalizzabile. Una cosa da ricordare — quell’attributo vive sull’elemento, non sulla classe, quindi se hai un placeholder in più di una griglia devi aggiungerlo a ognuna a mano.

Le griglie CMS seguono la stessa logica con una piega: non puoi inserire un elemento statico dentro una collection list. Al suo posto aggiungi un elemento placeholder alla collezione (uno senza immagine) e risolvi tre problemi in un colpo. Per l’accessibilità, aggiungi un campo CMS plain text (per esempio uno che contiene true o false) e collega l’attributo aria-hidden dell’elemento a quel campo — false per gli elementi veri, true per il placeholder. Per nascondere lo sfondo nella cella vuota, metti un div placeholder dentro il list item e usa la visibilità condizionale per mostrarlo solo quando il campo immagine è vuoto. E per evitare che il placeholder finisca in cima, aggiungi prima una regola di ordinamento su quel campo (alfabetica, così false viene prima di true e il placeholder scende in fondo), poi metti il tuo ordinamento vero sopra.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow — ha la griglia di immagini, quella di testo e quella CMS già pronte, così puoi smontarle e ricostruirle.

2. Crea i bordi. Seleziona la griglia, imposta il suo gap a 1px e dalle un background-color. All’inizio scegli qualcosa di brillante (un giallo-arancio si vede bene) così osservi l’effetto comparire, poi sostituiscilo con il colore vero del bordo.

3. Rendi opache le celle immagine. Seleziona un’immagine (possono condividere una classe), imposta width e height al 100%, poi imposta il fit su cover. Ora ogni immagine riempie la sua cella in modo pulito e i solchi restano uniformi.

4. Rendi opache le celle di testo. Dai agli elementi di testo un background color che corrisponde all’area attorno alla griglia (bianco, nel cloneable). Senza, il colore della griglia traspare attraverso le scatole di testo trasparenti e ammazza l’effetto.

5. Gestisci la cella vuota sui breakpoint più piccoli. Quando riduci le colonne e resta una cella dispari vuota, aggiungi un div placeholder nella griglia, dai al suo sfondo lo stesso colore dell’area circostante e imposta width/height al 100%. Poi attiva o disattiva il suo display per breakpoint — none dove non serve, block solo dove altrimenti una cella resterebbe vuota. Ricorda che la cascata scende verso il basso, quindi ricontrolla ogni breakpoint più piccolo.

6. Rendi accessibile il placeholder. Sull’elemento placeholder, aggiungi l’attributo custom aria-hidden con valore true. Aggiungilo a ogni placeholder — si imposta sull’elemento, non sulla classe.

7. Fallo nel CMS. Riusa la classe grid sulla collection list. Aggiungi un elemento placeholder senza immagine. Aggiungi un campo plain text per il valore di aria-hidden e collega l’attributo aria-hidden del list item a quel campo (false per gli elementi veri, true per il placeholder). Metti un div placeholder dentro il list item e usa la visibilità condizionale per mostrarlo solo quando l’immagine non è impostata. Infine, aggiungi una regola di ordinamento sul campo aria-hidden (alfabetica) così il placeholder finisce sempre per ultimo, poi metti sopra l’ordinamento che vuoi davvero.