Layout nello sviluppo web: il modulo CSS Grid | Antreem
Vai al blog

Layout nello sviluppo web: il modulo CSS Grid

di lettura
Massimo Artizzu
thumbnail

Negli anni i contenuti del mondo del web si sono evoluti in maniera consistente, sia nei temi che nei target. Già negli anni ’90, decennio che per il settore IT equivale alla “Preistoria”, si è intuito come la presentazione dei contenuti fosse parte fondamentale nel processo di comunicazione. In un mondo dove le informazioni sono sempre più facilmente accessibili è necessario guidare l’utente nel reperirle, per non farlo sentire smarrito.

E già dagli albori molte pagine web – pur con un’esecuzione che, agli occhi di un utente moderno, appare tra l’ingenuo e l’inesperto – hanno provato a fornire i contenuti in maniera strutturata, con un layout che facilitasse la navigazione e la discoverability del sito.

Sito di Apple nel 1997
Il sito apple.com come appariva nel 1997

Dai primi incerti tentativi, basati sulle tabelle (usate in maniera impropria per la disposizione dei contenuti e delle interazioni nella pagina), si è consolidata sempre più la consapevolezza di ciò che è necessario realizzare per raggiungere gli obiettivi di presentazione, accessibilità e responsività. Le ultime evoluzioni di CSS riescono a rispondere a tutte queste necessità, grazie al modulo Grid, che verrà supportato di default da Chrome e Firefox a partire da questo mese.

Al prossimo CSS Day, in programma il 17 marzo a Faenza, verranno illustrate le principali caratteristiche di CSS Grid e le sue applicazioni per risolvere uno dei problemi più annosi del web design – quello del layout della pagina – nella maggior parte delle sue iterazioni.

Si tratta di un modulo estremamente flessibile e versatile, capace di rispondere a diverse esigenze comuni dello sviluppo di layout e interfacce, quali:

  • disposizione degli elementi allineati a guide predefinite;
  • posizionamento degli elementi in senso orizzontale e verticale;
  • completo controllo dell’ordine nella disposizione degli elementi;
  • sviluppo semantico grazie all’uso di identificativi custom;
  • approccio chiaro ai problemi di allineamento e gutter.
Esempio di layout web classico
Con il modulo Grid di CSS, realizzare layout come questo in maniera pulita e senza “trick” sarà estremamente semplice.

Sarà, probabilmente, il modulo CSS più avanzato mai creato prima dell’introduzione di Houdini. Esso ha però ancora una lunga strada di definizione, sviluppo e adozione davanti a sé.

L’appuntamento è dunque per il prossimo 17 marzo al CSS Day, evento di cui Antreem è sponsor.

Massimo Artizzu
Scritto da
Massimo Artizzu
Formato in Matematica, ma adottato professionalmente nella programmazione, un pallino avuto sin da piccolo. Amante di enigmi e origami, giocatore di rugby per diletto.