CSS Grid Box Layout

Bene ragazzi vi siete divertiti con i CSS Flexbox, non è finita anzi completiamo l’esplorazione CSS 😉 Credo che dopo questo tutorial ed il tutorial sui CSS flexbox potete prendere il vostro caro Bootstrap 3 (Bootstrap 4 è ancora tutto da esplorare) e cestinarlo 🙂
Oggi vedremo i layout grid, i layout grid agiscono su un livello bidimensionale e non monodimensionale come i flexbox infatti potremo immaginare i flexbox come dei figli di un layout grid.

CSS Grid Box Layout Bidimensional

CSS Grid Box Layout vs CSS FlewxBox Layout

Vi invito sempre a prendere i tutorial con le pinze e capirne l’uso a cui sono adatti ho sperimentato i flexbox con successo in quanto risolvono note problematiche, per i grid box non posso dire praticamente la stessa cosa in quanto li ho iniziati da poco ad utilizzare il potenziale vi assicuro che è notevole 😉
Partiamo! I CSS Grid Box Layout sono la naturale evoluzione del display:table e delle tabelle, ormai davvero in disuso per i layout ricercati.

I CSS Grid Box Layout mirano a realizzare griglie utilizzando semplicemente display:grid, anzichè avere div flottati tra loro la cui dimensione è specificata in percentuale. Per impostare la dimensione di righe e colonne si usano rispettivamente grid-template-columns e grid-template-rows, posizionando infine gli elementi figli utilizzando grid-column e grid-row.
Finora sembra molto simile alla tecnologia dei CSS Flexbox, inoltre vi mostro anticipatamente la compatibilità con i browser che come vedete incoraggia molto il loro utilizzo 🙂

Compatibilità Browser CSS Grid Box Layout

CSS Grid Box Layout Support

Iniziamo con i punti chiave della trattazione:

  • 1. Il padre di una griglia deve avere la regola -> display:grid
  • 2. I figli diretti di una griglia sono chiamati Grid Item, attenzione però che la discendenza si ferma ai figli diretti senza estendersi ulteriormente ai “nipoti” di un nodo!
  • 3. Chiameremo Grid Line, le linee di separazione tra i vari figli di un display:grid

Chiariti questi elementi chiave suddivido la trattazione come per i flexbox in:

  1. CSS Grid Box Layout Container, proprietà css che fanno riferimento al contenitore papà.
  2. CSS Grid Box Layout Childs, proprietà css che fanno riferimento ai discendenti di un display:grid.

Dopo di questi saremo nuovamente pronti per giocare con Codepip: http://cssgridgarden.com/#it.
Se vi serve un aiutino durante il gioco eccovi serviti, https://www.gianlucadivincenzo.it/css/css-grid-box-garden/.
Buon divertimento 🙂

CSS Grid Box Layout ultima modidfica: 2018-01-31T21:49:00+01:00 da Gianluca Di Vincenzo
Posted in: CSS

By on 31 Gennaio 2018

Tagged: , , ,