Layout con CSS Grid
Pagina con sidebar e area principale a card.
Struttura pagina
Layout CSS3
I layout definiscono come gli elementi si distribuiscono nello spazio. Flexbox lavora soprattutto su una direzione, Grid su righe e colonne.
Teoria rapida
Flexbox
Utile per barre di navigazione, gruppi di card, centratura e allineamenti.
Grid
Utile per layout completi, dashboard, gallery e strutture bidimensionali.
Esempi interattivi
Modifica il codice e osserva l’anteprima live.
display: grid
Layout con Flexbox
Card flessibili con wrapping e centratura.
Verifica
Quiz su Layout CSS3
Rispondi alle domande per controllare subito la comprensione dell’argomento.
1. Quale proprietà attiva CSS Grid?
2. Quale proprietà crea colonne in Grid?
3. Flexbox lavora principalmente su...
4. A cosa serve gap?
5. Quale valore permette il ritorno a capo in Flexbox?
6. Quale unità di Grid indica una frazione dello spazio?
Esercitazione libera
Laboratorio libero: Layout CSS3
Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.
- Trasforma il layout Grid da 3 a 4 colonne.
- Aggiungi una media query per tablet con 2 colonne.
- Crea una dashboard con header, sidebar, contenuto e footer.
- Ricrea lo stesso layout usando Flexbox e poi Grid.