CSS Grid: introduzione
CSS Grid è un sistema di layout bidimensionale che permette di creare griglie complesse.
Attivare Grid
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 colonne uguali */
grid-template-rows: auto;
gap: 20px;
}Unità fr
L'unità fr (fraction) divide lo spazio disponibile:
grid-template-columns: 1fr 2fr 1fr; /* Centrale doppia */
grid-template-columns: 200px 1fr; /* Sidebar fissa + contenuto fluido */repeat()
grid-template-columns: repeat(3, 1fr); /* 3 colonne uguali */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */