• Tutte
  • Portfolio
  • Sviluppo
  • Tecnologia
  • Il futuro dei layout CSS: Grid layouts

    di Davide Milani

    Il “CSS Grid layout” è un sistema a griglie bidimensionale che cambierà completamente il modo in cui saranno sviluppate le future user-interface CSS.

    CSS da sempre è stato usato per la creazione di interfacce grafiche web, ma l’allineamento degli elementi non è mai stato semplice. Prima avevamo a disposizione le “tables” poi i “floats” poi i “positioning” e infine gli “inline-block”, ma nessuno di questi, per il posizionamento degli elementi, è mai stato uno strumento completo e semplice (basti pensare agli allineamenti verticali).

    Solo recentemente “flexbox”, l’ultimo strumento offerto da CSS, ha raggiunto un buon supporto da parte dei browser principali, ma anche quest’ultimo purtroppo presenta grossi limiti , primo fra tutti quello di essere stato pensato per layout relativamente semplici e monodimensionali.

    Grid layout” nasce proprio per offrire agli sviluppatori un unico strumento completo in grado di gestire qualsiasi tipo di layout.

    Come le tabelle, “grid layout” consente di allineare elementi in colonne e righe, ma a differenza di quest’ultime, non ha una “content-stucture” definita, lasciando quindi libertà totale nel posizionamento degli elementi interni; per esempio, a differenza delle “table” e di “flexbox”, gli elementi contenuti in un container “grid layout” possono essere posizionati in overlap come gli elementi “positioned”.

    Sintassi

    Lo sviluppo della sintassi non è ancora completo, è possibile comunque controllarne lo stato di avanzamento nelle Working Draft di W3C.

    Ecco un Esempio:

    Che permette di ottenere una griglia strutturata in questo modo:

    grid layout scheme

    Supporto

    Il supporto da parte dei browser è ancora agli inizi:

    • Su Chrome, Firefox e Opera è necessario abilitare il supporto manualmente.
    • Internet Explorer e Edge restano fermi ad una vecchia sintassi ormai abbandonata.
    • Su Safari e tutti i browser mobile il supporto, al momento, è inesistente.

    Stato di avanzamento del supporto per Browser Desktop:

    desktop grid layout supportdesktop grid layout support

    Come si può notare, il supporto su Mobile è ancora assente, ma sicuramente il porting della funzionalità avverrà dalle implementazioni Desktop non appena saranno stabili:

    desktop grid layout support

    fonte: http://caniuse.com/#feat=css-grid

     

    Seguiremo gli sviluppi di questa nuova funzionalità e non mancheremo di aggiornarvi non appena ci saranno delle novità concrete!

    Leggi anche...