Ente accreditato Regione Veneto n.4271

CSS grid layout – Tutorial #2

Introduzione all’utilizzo del display grid CSS - Seconda parte

Pubblicato da Simone // 7 febbraio 2018 // 65 visualizzazioni

Proseguiamo il nostro viaggio nel mondo del display grid e andiamo ad approfondire le possibilità che questo ci offre. Vi ricordo che per poter seguire questo tutorial è necessario aver prima seguito e compilato l’esercizio presente nel nostro precedente articolo che trovate all’indirizzo:

venetoformazione.it/blog/css-grid-layout-tutorial-1/

Griglia complessa

HTML

displaygrid

CSS

displaygrid

Come vediamo in questo nuovo esempio possiamo creare delle griglie più complesse andando a rielaborare i valori precedentemente assegnati al div grid-layout-2. Questa volta abbiamo infatti 5 colonne, 2 al 10% e 2 al 20%, il totale sarà quindi 60% e il valore della colonna centrale definito auto andrà a completare il restante 40% mancante come da figura sotto

displaygrid

Spazi tra righe e colonne

HTML

displaygrid

CSS

displaygrid

In questo esempio vediamo come sia possibile definire dei gap, degli spazi tra colonne e righe, utilizzando gli attributi grid-row-gap e grid-column-gap. Ricordiamoci che, se lavoriamo in percentuale, è buona norma definire con lo stesso principio anche il gap tra le colonne. In questo caso tra le 2 colonne al 32% ne è stata inserita una terza con lunghezza auto cosi da poter distribuire correttamente il totale + 1% di gap senza sforare.

displaygrid

In un prossimo articolo vedremo come gestire gli allineamenti interni delle nostre strutture!

Topic: , , ,

Send this to a friend