ambiente di test per design.italia.it

Griglie

All’interno dello spazio a disposizione l’organizzazione del contenuto deve essere strutturata seguendo un sistema di griglie responsive per mantenere una efficace esperienza utente trasversalmente ai dispositivi utilizzati.

La griglia rappresenta la struttura invisibile che permette di organizzare i contenuti della pagina. Una griglia di impaginazione consiste in colonne di testo (e/o immagini) separate da spazi intercolonna e contornate dai margini della pagina.

Le dimensioni delle colonne vanno adattate ai cambiamenti della viewport: ogni colonna occuperà una percentuale di spazio specifica a seconda che sia visualizzata su dispositivi desktop, tablet, o smartphone. La ridisposizione dei contenuti, a seconda delle dimensione dello schermo, garantisce che i testi siano leggibili anche sugli schermi più piccoli e l'interazione utente (es. form, controlli dinamici) rimanga agevole.

Impostazioni della griglia di costruzione consigliata

  • Larghezza massima del contenitore: 1440 px
  • Spazio intercolonna (gutter): 16 px a tutte le risoluzioni.
Breakpoint Padding laterale
Smartphone
(< 768 px)
16 px
Tablet
(< 992 px)
16 px
Desktop
(< 1366 px)
24 px
Desktop
(> 1366 px)
24 px

l'ultima modifica di questa pagina risale a 15 giorni fa

torna all’inizio del contenuto
torna all'inizio del contenuto