Layout CSS moderni: Grid e Flexbox

La fine degli hack

Per anni i layout CSS si sono basati su float e trucchi vari. Oggi Flexbox e CSS Grid permettono di costruire interfacce responsive in modo dichiarativo e pulito. La domanda non e quale usare, ma quando usarli.

Flexbox: una dimensione

Flexbox eccelle quando si dispongono elementi lungo un asse (riga o colonna): barre di navigazione, gruppi di pulsanti, allineamenti verticali.

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

Grid: due dimensioni

CSS Grid e pensato per layout a due dimensioni, dove conta sia la riga sia la colonna: griglie di card, layout di pagina, dashboard.

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

La regola pratica

Una linea guida semplice: Grid per il layout della pagina, Flexbox per i componenti al suo interno. Spesso si usano insieme, ed e perfettamente normale.

Responsive senza dolore

Con minmax, auto-fill e le unita relative, molte griglie diventano responsive senza nemmeno scrivere media query. Il browser fa il lavoro per noi.

In MUSTNODE costruiamo interfacce responsive con Grid e Flexbox, ottenendo layout robusti e manutenibili con poco codice.