Progettazione di siti web
a.a. 2021/22

Grid layout

Maria Simi
Maggio, 2022

Da una presentazione di: Morten Rand-Hendriksen

Sommario

• C'era una volta il table layout ...
• Siti responsive: tabelle abbandonate, troppo rigide; elementi HTML semantici (MAIN, HEADER, ASIDE, FOOTER ...) disposti nella pagina con i float ... complicato.
• I Flex dei CSS3 sono un passo avanti, ma sono limitati ... e complicati.
• Il futuro è il layout a griglia: display: grid dei CSS3.
  
  • Perché è una buona idea
  • Terminologia
  • Come funziona
  • Un esempio
• Come cambia il modo di fare layout

Morten Rand-Hendriksen

• Video su YouTube
• Presentazione su SlideShare

Un semplice layout

• Facile da realizzare con una tabella, markup non ideale
• Difficile da rendere responsive

Un semplice layout (con tabelle vecchio stile)

Tipico esempio di come si farebbe layout oggi

Stesso layout con div e float

Clear-fix hack

• Aggiungere un contenuto invisibile alla fine, per tenere aperti i contenitori

Float con clear-fix

Un tipico layout responsive

• Gli elementi non soltanto solo fluidi, ma sono anche riorganizzati sui vari media

La soluzione Bootstrap

• Griglia ridimensionabile, tipicamente su 12 colonne
  
• Posizionamento degli elementi sulla griglia
• Spostamento degli elementi con Javascript

In sintesi

• L'ordine dei div non è facilmente modificabile
  
  • Si è obbligati a introdurre contenitori in eccesso (div o altro) che ...
    
  • appesantiscono il markup
  • non sono semplici da usare
• Servirebbe Javascript, utilizzando un framework come Bootstrap, ma è costoso
• I flex consentono di riorganizzare solo lungo una direzione

La strategia alternativa del grid layout

1. Definire una griglia con i CSS
2. Posizionare gli elementi nella griglia con i CSS
3. Quando necessario, cambiare la struttura della griglia e il posizionamento degli oggetti in essa, sempre con i CSS e le media query

• Un cambio importante di paradigma:
  
  • Content-out: si parte dai box dei contenuti che si posizionano uno rispetto all'altro
  • Layout-in: si parte dal layout definito come griglia e si riempie con i contenuti

La strategia del grid layout

Si parte con la griglia e un markup minimale; poi si posizionano gli elementi con i CSS

Terminologia

• Contenitore griglia L'elemento che definisce i limiti della griglia.
• Elementi della griglia Ogni elemento figlio collocato nella griglia.
• Linee della griglia Le linee di divisione tra righe e colonne.
• Celle della griglia L'intersezione tra righe e colonne.
• Tracks (percorsi) della griglia Un nome generico per righe e colonne.
• Aree della griglia Una cella o più celle consecutive che determinano uno spazio dove gli elementi saranno collocati.
• Gap della griglia spazi tra un track e l'altro

Pagina HTML base

Nessuna griglia

Definizione della griglia: CSS

Definizione della griglia: CSS

Griglia base

Posizionare gli elementi - 1

Posizionare gli elementi - 2

Posizionare gli elementi - 3

Griglia riempita

Dare un nome alle aree

Mappare gli elementi sul nome delle aree

Griglia con nome aree

Go responsive

Go responsive: da 2 a 3 colonne

Supporto nei browser

• Le griglie cominciano ad essere ben supportate in tutti i browser moderni
• Alcuni problemi con Internet Explorer10 e Edge
• Nei CSS è possibile scrivere regole condizionate al supporto da parte dei browser con le feature query
• Esempio:

  @supports (display: grid) {
    grid-template-areas:
  	 "title title"
  	 "main header"
  	 "main sidebar"
     }
         

Mobile first!

Strategia raccomandata

• Nel transitorio ...
  
  • Costruisci pagine senza griglia per mobile, secondo la strategia mobile first
  • Usa questa versione come fallback (paracadute) per i browser che non supportano le griglie
  • Usa @supports per scoprire se il browser supporta le griglie
  • Sui breakpoint, crea layout con la griglia
  • Esplora nuovi layout su schermi grandi
• Soluzione finale che implementa questa strategia
  
  • Nessuna griglia per mobile
  • Due colonne per schermi di almeno 800px
  • Tre colonne per schermi di almeno 12oopx
  • Layout responsive

Firefox grid inspector

• Firefox e Chrome mettono a disposizione tra gli strumenti per sviluppatori la possibilità di esplorare la griglia
• Altri browser seguiranno ...

Proviamo a usarlo su questo esempio

Per saperne di più

• Grid changes everything di Morten Rand-Hendriksen
• Slide della presentazione
• Tutorial di Rachel Andrew