CSS Grid e Flexbox: Layout Moderni per il Web

Il Potere dei Layout CSS Moderni

CSS Grid e Flexbox sono gli strumenti fondamentali per creare layout web moderni. Insieme coprono ogni esigenza di design, dal più semplice al più complesso.

1. Flexbox: Layout Mono-dimensionale

Container Flex Base

.flex-container {
  display: flex;

  /* Direzione */
  flex-direction: row;          /* row | row-reverse | column | column-reverse */

  /* Wrap */
  flex-wrap: wrap;              /* nowrap | wrap | wrap-reverse */

  /* Allineamento asse principale */
  justify-content: space-between; /* flex-start | flex-end | center | space-around | space-evenly */

  /* Allineamento asse trasversale */
  align-items: center;          /* stretch | flex-start | flex-end | center | baseline */

  /* Allineamento righe multiple */
  align-content: flex-start;    /* stretch | flex-start | flex-end | center | space-between | space-around */

  /* Gap tra elementi */
  gap: 1rem;
}

Flex Items

.flex-item {
  /* Crescita proporzionale */
  flex-grow: 1;

  /* Riduzione proporzionale */
  flex-shrink: 0;

  /* Dimensione base */
  flex-basis: 200px;

  /* Shorthand: grow shrink basis */
  flex: 1 0 200px;

  /* Auto-allineamento */
  align-self: flex-end;

  /* Ordine visivo */
  order: 2;
}

Pattern Flexbox Comuni

/* Navbar con logo e menu */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.navbar-menu {
  display: flex;
  gap: 2rem;
}

/* Card con footer in fondo */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex: 1; /* Occupa spazio disponibile */
}

.card-footer {
  margin-top: auto; /* Spinge in fondo */
}

/* Centramento perfetto */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Input con icona */
.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
}

.input-group button {
  flex-shrink: 0;
}

2. CSS Grid: Layout Bi-dimensionale

Grid Container Base

.grid-container {
  display: grid;

  /* Colonne esplicite */
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: minmax(200px, 1fr) 3fr;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  /* Righe esplicite */
  grid-template-rows: auto 1fr auto;

  /* Gap */
  gap: 1.5rem;
  row-gap: 1rem;
  column-gap: 2rem;

  /* Aree nominate */
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

Grid Items

.grid-item {
  /* Posizionamento per linee */
  grid-column: 1 / 3;           /* Da linea 1 a linea 3 */
  grid-column: span 2;          /* Occupa 2 colonne */
  grid-row: 1 / -1;             /* Da prima a ultima linea */

  /* Posizionamento per area */
  grid-area: header;

  /* Auto-allineamento */
  justify-self: center;         /* start | end | center | stretch */
  align-self: end;
}

/* Shorthand posizionamento */
.item {
  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 3 / 4;
}

Pattern Grid Comuni

/* Layout Holy Grail */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* Griglia responsive auto */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

/* Magazine Layout */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Masonry-like con Grid */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: 1rem;
}

.masonry-item.small { grid-row: span 20; }
.masonry-item.medium { grid-row: span 30; }
.masonry-item.large { grid-row: span 40; }

3. Subgrid (CSS Grid Level 2)

/* Allinea elementi figli alla griglia parent */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.child-grid {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid; /* Eredita colonne parent */
  gap: 1rem;
}

/* Utile per form */
.form-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

4. Responsive Design Avanzato

/* Mobile-first con Grid */
.responsive-grid {
  display: grid;
  gap: 1rem;

  /* Mobile: 1 colonna */
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .responsive-grid {
    /* Tablet: 2 colonne */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    /* Desktop: 3 colonne */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Container Queries */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

/* Fluid Typography con Grid */
.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;

  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
  }
}

5. Combinare Grid e Flexbox

/* Grid per layout pagina, Flex per componenti */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-footer {
  margin-top: auto;
}

.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  align-content: start;
}

/* Card con Flex interno */
.card {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Best Practices

• Usa Flexbox per layout mono-dimensionali (navbar, card content)
• Usa Grid per layout bi-dimensionali (page layout, gallery)
• Preferisci unità fr per colonne flessibili
• Usa minmax() e auto-fit/auto-fill per responsive intrinseco
• Combina Grid e Flexbox: Grid per struttura, Flex per componenti

Conclusioni

CSS Grid e Flexbox insieme ti danno il controllo totale sui layout. Padroneggia entrambi per creare interfacce moderne, responsive e mantenibili.