Il metodo di lavoro
Layout Grid si concentra sullo scheletro della pagina: colonne, gutter, margini esterni e come cambiano al variare delle dimensioni del viewport. Distingue le colonne fluide dai contenitori a larghezza massima fissa e dai layout adattivi, così una specifica di griglia può descrivere il comportamento e non solo uno screenshot desktop.
La fonte è una guida compatta, non una libreria di implementazione. I numeri di colonne comuni e gli esempi di breakpoint sono punti di partenza. Il risultato utile è una griglia scelta in base ai contenuti, con istruzioni chiare per aree a tutta larghezza, sezioni di lettura contenute, barre laterali e card ripetute.
Risultati attesi
- Una tabella dei breakpoint con colonne, gutter, margini e limiti del contenitore.
- Regole di layout per aree contenute, a tutta larghezza, barre laterali e card.
- Note per gli sviluppatori che spiegano l'adattamento tra le diverse larghezze.
Dal brief alla revisione
- 01Scegli il tipo di griglia
Abbina struttura a colonne, modulare, di linea base o composta ai contenuti, invece di presumere che ogni pagina richieda la stessa griglia.
- 02Specifica il comportamento della larghezza
Definisci dove le colonne si estendono, dove un contenitore smette di crescere e quando colonne o barre laterali vengono eliminate.
- 03Verifica le larghezze intermedie
Controlla le transizioni attorno ai breakpoint, non solo gli schermi di riferimento più piccoli e più grandi.