CSS Flexbox vs Grid: quale sistema di layout dovresti usare?

La regola della singola frase

Usa Flexbox quando stai disponendo elementi in una sola direzione (una riga o una colonna). Usa CSS Grid quando hai bisogno di controllare il layout in due direzioni contemporaneamente (righe e colonne simultaneamente).

Questa è l'intera decisione. Tutto il resto è un approfondimento sul perché questa regola funzioni nella pratica.

In cosa Flexbox è realmente bravo

Flexbox è stato progettato per la distribuzione dello spazio lungo un singolo asse. La sua funzione principale è che gli elementi possono crescere, ridursi e avvolgersi naturalmente senza che tu debba specificare dimensioni esatte per ognuno.

Questi sono i casi in cui Flexbox è la scelta giusta:

• Barre di navigazione — una riga di link dove vuoi che alcuni elementi vengano spinti a destra (margin-left: auto) o spaziati uniformemente (justify-content: space-between>)
• Righe di schede (cards) dove ogni scheda ha la stessa altezza indipendentemente dalla lunghezza del contenuto (align-items: stretch gestisce questo automaticamente)
• Centrare un elemento orizzontalmente e verticalmente all'interno di un contenitore — tre righe di CSS: display: flex; justify-content: center; align-items: center
• Gruppi di pulsanti, combinazioni icona + etichetta e qualsiasi componente in cui i figli devono stare affiancati con una certa spaziatura
• Liste a incastro (wrapping) dove vuoi che gli elementi si spostino alla riga successiva quando non c'è più spazio (flex-wrap: wrap>)

.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.navbar .logo { margin-right: auto; }
/* logo rimane a sinistra, i link a destra */

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100dvh;
}

.card-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.card { flex: 1 1 280px; }

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