Intermedio13 min

CSS Grid

Il sistema di layout bidimensionale per creare griglie complesse con righe e colonne.

CSS Grid

CSS Grid è il sistema di layout bidimensionale — gestisce righe e colonne contemporaneamente. È lo strumento ideale per layout di pagina, gallerie e qualsiasi struttura a griglia.

Griglia base

css

.layout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  min-height: 100vh;
}

Template areas

Le template areas rendono il layout leggibile come una mappa visiva.

css

.pagina {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Posizionamento esplicito

Puoi posizionare gli elementi su righe e colonne specifiche.

css

.elemento-grande {
  grid-column: 1 / 3;  /* occupa colonne 1 e 2 */
  grid-row: 1 / 3;     /* occupa righe 1 e 2 */
}

/* Shorthand: grid-column: inizio / fine */
.intero-rigo {
  grid-column: 1 / -1; /* da inizio a fine */
}

auto-fill e auto-fit

Per griglie responsive senza media queries.

css

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

●auto-fill crea colonne vuote se c'è spazio extra
●auto-fit espande le colonne esistenti per riempire lo spazio