Griglia CSS avanzata
Impara a creare layout complessi con CSS Grid, utilizzando fr units, grid-template-areas e media queries per design responsive.
Risultato finale
Ecco come apparirà il layout con CSS Grid
Contenuto Principale (3fr)
Questa area è 3 volte più larga della sidebar grazie all'uso di fr units.
Card 1
Card 2
Card 3
Card 4
Codice
Implementazione completa del layout griglia base (1fr + 3fr)
<div class="container">
<div class="sidebar">Sidebar (1fr)</div>
<div class="main-content">Contenuto Principale (3fr)</div>
</div>Concetti chiave
Fr Units
1fr significa "1 frazione dello spazio disponibile". 3fr è 3 volte più grande di 1fr.
Grid Template Areas
Permette di nominare le aree della griglia per un codice più leggibile.
Gap
Crea spazio tra gli elementi della griglia senza margin complessi.
Vantaggi CSS Grid
- Layout bidimensionali (righe e colonne)
- Controllo preciso del posizionamento
- Codice più pulito e leggibile
- Ottimo per layout complessi
💡 Quando usare CSS Grid
CSS Grid è perfetto per:
- • Layout di pagina completi (header, sidebar, main, footer)
- • Griglie di card o prodotti
- • Dashboard e interfacce complesse
- • Quando hai bisogno di controllo sia su righe che colonne
Usa Flexbox per: componenti singoli, centratura, distribuzione di elementi in una direzione.