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
CSS
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
Spazi tra righe e colonne
HTML
CSS
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.
In un prossimo articolo vedremo come gestire gli allineamenti interni delle nostre strutture!
Ancora nessun commento