il layout di un sito

il sistema preistorico

C'erano una volta le tabella, le tables: con cui si impaginavano le pagine, mettendo i contenuti nella celle di sinistra, in quelle di centro e in quelle di destra.

contenuti a sinistra,
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

contenuti in mezzo,
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

contenuti a destra,
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

un sistema più recente, le sezioni flottanti

Giustamente tale abitudine, deprecata dal w3c, è stata poi scartata in favore dei layouts flessibili con comando float.

Si crea una div come contenitore e poi al suo interno si colloca la colonna di sinistra (float: left) e quella di destra (float: right), come nell'esempio seguente:

colonna di sinistra
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

colonna di destra
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

il sistema flexbox

Oggi la soluzione più avanzata (di cui parliamo anche a proposito di centratura di elementi) è il flexbox.

Esso semplifica molto la vita, ad esempio permette in modo semplice e pulito (a differenza di float) di accostare non solo due ma anche tre o più colonne. Vediamo l'esempio seguente:

Vi è una div contenitrice (display: flex) e delle div contenute (flex: 1 1 [+ percetuale: ad esempio 30%])

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Il flexbox può rapidamente adattarsi alle dimensioni dello schermo, mediante le media queries. Qui lo facciamo vedere semplicemente col passaggio del mouse:

giocando con flexbox

allineare verticalmente: `align-items`

Proviamo ad allineare verticalmente al centro. Questo il codice: display: flex; flex-flow: row; align-items: center;

Proviamo ad allineare verticalmente in basso. Questa volta useremo align-items: flex-end.

align-self

Allineiamo in basso con eccezione della colonna centrale, che va verso l'alto: align-self

allineare orizzontalmente: `justify-content`

Per allineare orizzontalmente al centro, usiamo justify-content: justify-content: center

un problema

C'è un problema però: è arduo unire a flexbox la proprietà postion:fixed. Ne parliamo in un'altra pagina.

multicolonna con column-count e con flex

Si vede che con flex gli elementi affiancati hanno la stessa altezza, mentre con column-count no.

con column-cont

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

con flex

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

il sistema grid

È l'ultimo sistema, che aggiunge, rispetto a flexbox, anche la possibilità di regolare, oltre che in orizzontale, anche in verticale le sezioni. Si possoono fare con grid layout abbastanza complessi, e con un codice piuttosto sobrio e pulito. Se veda l'esempio seguente:

questa div ha questo codice:
grid-row: 1 / 3;

questa div ha questo codice:
grid-column: 1 / 5;

Si trovano sul web delle buone guide su grid (ad esempio quella di w3schools o quella di developer mozilla o questa (molto ben fatta).

problemi con grid

Uno dei maggiori problemi è il fatto che il grid-gap incide sul calcolo dello spazio occupato totale. Quindi per evitare ad esempio indesiderate (e inutili) barre di scorrimento è meglio usare come unità di rows e columns l'unità fr piuttosto che la percentuale (come è spiegato qui).

🛒 ricerche / acquisti

cerca libri su Amazon sul tema: layout impaginazione table float flexbox e-book e-reader ereader Kindle Kobo computer PC hardware software sistema operativo linux Apple cultura libri on-line il layout di un sito .