CSS Grid è un potente sistema di layout in CSS che permette di creare griglie bidimensionali flessibili e dinamiche. Grazie a CSS Grid è possibile disporre elementi all'interno di righe e colonne, controllando facilmente la posizione e la dimensione di ogni singolo componente all'interno della griglia.
Creare griglie fluide adattabili a tutti i dispositivi con CSS e HTML
Questa tecnica è ideale per progettare layout complessi e strutture responsive, perché consente una grande precisione nella distribuzione degli elementi e nell'adattamento alle diverse dimensioni dello schermo.
La sua importanza si focalizza sull'evoluzione significativa rispetto ai metodi tradizionali di layout, come il float, il flexbox o l'uso di positioning assoluto e relativo. Infatti con CSS Grid è possibile creare layout avanzati con meno codice e maggiore controllo visivo. Di conseguenza questa tecnica risulta particolarmente utile per designer e sviluppatori che desiderano creare layout complessi in modo più intuitivo e veloce.
In questa guida si esplorano le basi di CSS Grid tramite alcuni esempi pratici, come ad esempio: creare una griglia di base, posizionare gli elementi in celle specifiche, definire aree e utilizzare unità frazionarie per ottenere una struttura perfettamente bilanciata e adattabile.
A cosa serve il layout CSS Grid?
Il layout CSS Grid serve a creare strutture di pagina complesse e flessibili, disposte in righe e colonne, in modo semplice e intuitivo. È ideale per costruire griglie bidimensionali che consentono di posizionare e dimensionare elementi con precisione, indipendentemente dalle dimensioni dello schermo. Tale tecnica ricopre un ruolo fondamentale nel web design moderno poiché offre un metodo altamente flessibile per creare strutture responsive che si adattano a qualsiasi dispositivo. Dalle grandi risoluzioni dei desktop agli schermi più piccoli dei dispositivi mobili.
Utilizzare CSS Grid, permette ai designer di creare layout più complessi e visivamente accattivanti, risparmiando tempo rispetto ai metodi tradizionali e garantendo maggiore controllo sulla posizione e sull'allineamento degli elementi.
Quali sono i pro e i contro del CSS Grid?
Tra le note a favore dell'utilizzo di questa tecnica vi è sicuramente la flessibilità e il controllo. CSS Grid permette una gestione precisa degli spazi, consentendo di definire layout sia bidimensionali (righe e colonne) che adattivi. Inoltre è chiara la semplicità nel codice in quanto riduce la necessità di regole complesse (come float), rendendo il codice più leggibile e mantenibile. Infine, esso rappresenta un supporto per layout complessi in quanto facilita la creazione di layout multicolonna e multi-area. Ideali per applicazioni, dashboard e siti web ricchi di contenuti.
Nonostante i numerosi pro a favore di questa tecnica vi sono alcune pecche da tenere in considerazione. Su tutte la compatibilità limitata con i browser più datati. Questi ultimi non supportano infatti CSS Grid, di conseguenza occorre verificare la compatibilità o prevedere soluzioni alternative per utenti con dispositivi meno aggiornati. È essenziale dunque valutare l'uso di questa tecnica rispetto ad altre a seconda delle necessità specifiche del progetto.
Termini, utilizzi principali e… un esempio pratico
Per prima cosa è importante considerare che il layout Grid è costituito da due elementi principali. Un contenitore della griglia principale (container) e, nella maggior parte dei casi, più contenitori secondari interni (item). Il primo è responsabile delle informazioni di layout principali, ad esso si applicano ad esempio il numero di colonne/righe e le rispettive dimensioni dello spazio vuoto. I contenitori secondari interni sono le caselle in cui normalmente si inseriscono gli elementi dell'interfaccia del sito web.
Questi contenitori possono essere personalizzati utilizzando classi per il posizionamento all'interno del contenitore della griglia principale. Procediamo quindi con un esempio:
<body>
<div class="grid-container">
<header class="header">Intestazione</header>
<main class="content">
<section class="left">Colonna Sinistra</section>
<section class="center">Colonna Centrale</section>
<section class="right">Colonna Destra</section>
</main>
<footer class="footer">Footer</footer>
</div>
</body>In queste poche righe di codice HTML si è scelto di rappresentare una semplice pagina suddivisa in tre sezioni (all'interno dell'elemento main con classe content). Nella parte alta della pagina vi è l'header ovvero l'intestazione contenente il titolo della pagina.
Troviamo poi il contenuto centrale. Al suo interno ulteriori tre sezioni che verranno successivamente ordinate seguendo l'ordine suggerito dai nomi delle classi assegnate.
Infine il footer in fondo alla pagina.
CSS Grid per il layout
Ora si procede applicando il CSS Grid per creare il layout. Si configura dunque il file style.css per iniziare a definire il layout della griglia.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f3f4f6;
}Come prima cosa è fondamentale settare le proprietà del body in modo che il contenuto della pagina possa essere posizionato correttamente.
.grid-container {
display: grid;
grid-template-rows: 80px 1fr 50px;
grid-template-columns: 1fr;
width: 80%;
max-width: 1200px;
min-height: 80vh;
gap: 10px;
}Assegnazione dello stile
Nel codice precedente si assegna lo stile al macro-contenitore esterno ovvero quello che contiene tutti gli elementi. La proprietà grid-template-rows: 80px 1fr 50px definisce le righe della griglia. La prima riga (l'header) avrà un'altezza di 80px, la seconda (il contenuto principale) si espanderà per occupare tutto lo spazio disponibile (1fr significa "una frazione del resto dello spazio disponibile") e la terza (il footer) avrà un'altezza di 50px. grid-template-columns: 1fr definisce invece una sola colonna nella griglia principale che occupa l'intera larghezza. Le altre proprietà di questa classe si occupano di gestire la larghezza e l'altezza del contenitore e il suo margine interno.
Dopo aver definito lo stile dell'header si passa al contenitore centrale, suddiviso in tre sotto-sezioni ordinate orizzontalmente, come segue:
.content {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
grid-row: 2 / 3;
}In questo modo vengono definite tre colonne di larghezze relative. La colonna centrale avrà il doppio della larghezza delle due colonne laterali (1fr 2fr 1fr). Il gap, ovvero lo spazio tra di esse, sarà di 10px. Infine grid-row: 2 / 3 posiziona il contenuto nella seconda riga della griglia principale (dal punto di inizio della riga 2 fino alla fine della riga 3).
Il resto del codice CSS si concentra sui colori dello sfondo di ciascuna sezione (in modo da facilitare il loro riconoscimento all'interno della pagina).
Una delle caratteristiche principali di CSS grid è la sua adattabilità a diversi tipi di dispositivi. Di conseguenza è possibile lavorare sul codice appena creato in modo da renderlo responsive e per fare ciò si procede tramite media query:
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}
}Questa regola applica uno stile diverso quando la larghezza dello schermo è inferiore a 768px. In particolare grid-template-columns: 1fr modifica la struttura delle colonne della sezione .content da tre a una sola colonna per i dispositivi mobile.
Ulteriore possibilità di personalizzazione e conclusione
Il risultato che si ottiene con il codice appena descritto è il seguente:
Come già visto in precedenza, il layout CSS Grid offre un alto livello di flessibilità. Di conseguenza è possibile personalizzare ulteriormente ogni sezione per adattarsi a qualsiasi esigenza di design. Grazie alla possibilità di modificare facilmente il numero e le dimensioni di righe e colonne è semplice aggiungere o rimuovere sezioni, espanderle su più colonne o righe, o persino cambiare l'ordine degli elementi in base al dispositivo.
Questa capacità di controllo consente di creare layout complessi e adattabili con pochi aggiustamenti nel codice.
La tecnica CSS Grid rappresenta uno strumento essenziale per il web design moderno. Essa facilita la costruzione di strutture di pagina pulite e responsive e, con un po' di pratica, diventa possibile gestire progetti complessi mantenendo un codice chiaro e facilmente editabile, aprendo infinite possibilità di design.
L'esempio mostrato in questa guida rappresenta solo una delle tante possibilità di utilizzo di questo layout. Gallerie di immagini, dashboard, griglie di prodotti e-commerce, blog o form a più colonne sono solo alcuni degli esempi pratici di utilizzo di CSS grid.
