Il dilemma del layout

Ogni sviluppatore frontend prima o poi si chiede: meglio Grid o Flexbox? La risposta, come spesso accade, e dipende.

Flexbox: layout mono-dimensionale

Flexbox eccelle quando devi distribuire elementi lungo una sola direzione (riga o colonna).

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

Casi d'uso ideali:

  • Navbar orizzontali
  • Card con contenuto allineato
  • Centrare un elemento verticalmente e orizzontalmente
  • Distribuire spazio tra elementi

CSS Grid: layout bi-dimensionale

Grid e perfetto quando hai bisogno di controllare righe e colonne contemporaneamente.

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

Casi d'uso ideali:

  • Layout di pagina complessi
  • Griglie di card responsive
  • Dashboard con aree definite
  • Layout magazine-style

La regola pratica

Scenario Strumento
Una dimensione Flexbox
Due dimensioni Grid
Allineamento contenuto Flexbox
Posizionamento aree Grid
Distribuzione spazio Entrambi

Combinali insieme

La vera potenza sta nel combinarli. Usa Grid per il layout generale della pagina e Flexbox per i componenti interni.

/* Grid per il layout */
.page {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

/* Flexbox per i componenti */
.card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

Conclusione

Non esiste un vincitore assoluto. Flexbox e Grid sono strumenti complementari che, usati insieme, permettono di creare qualsiasi layout con codice pulito e mantenibile.