CSS  »  Articoli  »  CSS Template e layout 

Recentemente nel web design c'è una forte tendenza ad avvicinarsi a concetti che tipicamente appartengono alla tipografia tradizionale. Ne sono un esempio le griglie, concetto già noto nel secolo scorso nel design e recentemente applicato al web design per ottenere risultati armoniosi e layout precisi al pixel.

In questo appuntamento, dopo una breve introduzione teorica, vedremo una possibile applicazione delle griglie per ottenere un layout stabile, cross-browser e modulare con poche regole CSS. Ecco una piccola anteprima di ciò che andremo a realizzare.

Progettare la griglia

Ancora prima di cominciare la codifica con HTML e CSS, è una buona pratica la pianificazione del layout. Per preparare l'esempio di questo articolo, ho pensato ad un layout che potesse essere adeguato a una risoluzione di 1024x768 e il più modulare possibile. Sostanzialmente, si tratta di un layout a due colonne: la colonna principale può essere suddivisa perfettamente fino a sei parti, mentre la secondaria fino a quattro.

La difficoltà fondamentale nella progettazione con le griglie è la presenza di ciò che viene definito gutter nella terminologia inglese della tipografia, ovvero la spaziatura tra le varie sezioni verticali. Per ottenere un effetto quanto più armonico e bilanciato è importante che le varie spaziature orizzontali siano di uguali misura. Pertanto, non è sufficiente stabilire larghezze che siano divisibili per un numero di sezioni verticali a piacere, ma bisognerà considerare la presenza dei vari gutter che le dividono.

Una volta stabilita la larghezza del layout e decisa una spaziatura generosa (pari a 20px) tra le varie colonne, ho proceduto con carta e penna, e calcolatrice per tentativi, fino ad ottenere il risultato voluto, di cui riporto lo schema ridotto di seguito (qui la versione a dimensione naturale):

Figura 1 - lo schema della griglia

Il passo successivo nella costruzione dell'esempio è stata la stesura del markup. Vediamolo.

Altri articoli

Altre guide

Altre newsletter