Layout responsive con Grid per la struttura e Flexbox per i componenti

Seguendo il principio mobile-first, il nostro sito al momento è un’unica lunga colonna: una base adatta agli schermi piccoli. Ora dobbiamo assicurarci che il contenuto non tocchi mai i bordi dello schermo e dobbiamo creare il layout affiancato per i monitor più grandi.

1. Il Contenitore Limite (Container)

Nessun sito web moderno si allarga all’infinito su un monitor da 34 pollici. Vogliamo che il contenuto rimanga in una colonna centrale, ad esempio larga al massimo 1200px.

Applichiamo una classe .container (o lo applichiamo direttamente ai tag <header>, <section> e <footer>) per “ingabbiarli”:

header, section, footer {
  /* Larghezza al 100% su mobile, con limite massimo su desktop */
  width: 100%;
  max-width: 1200px;
  
  /* Centra il blocco orizzontalmente */
  margin: 0 auto;
  
  /* Spaziatura laterale per non toccare i bordi dello smartphone */
  padding: 0 var(--spazio-md);
}

/* Diamo respiro verticale alle sezioni */
section {
  padding-top: var(--spazio-xl);
  padding-bottom: var(--spazio-xl);
}

2. Flexbox per la Navigazione (Header)

Il nostro <header> contiene il logo, i link e il bottone. Vogliamo affiancarli e spingerli agli estremi. È un caso adatto a Flexbox, perché il problema principale è l’allineamento su un asse.

.header {
  display: flex;
  justify-content: space-between; /* Spinge logo e bottone ai lati */
  align-items: center; /* Li centra in verticale */
  
  padding-top: var(--spazio-md);
  padding-bottom: var(--spazio-md);
}

/* Anche i link centrali possono usare Flexbox per affiancarsi */
.nav-links {
  display: flex;
  gap: var(--spazio-lg); /* Spazio tra i link */
}

3. CSS Grid per la Griglia Progetti

Nella sezione Portfolio, abbiamo una <div class="griglia-progetti"> che contiene le varie card. Su mobile le vogliamo in colonna (default HTML), mentre su desktop vogliamo più colonne fluide. Useremo CSS Grid con auto-fit per ottenere una griglia responsive senza introdurre subito una media query.

.griglia-progetti {
  display: grid;
  
  /* Crea dinamicamente quante più colonne possibili larghe almeno 300px.
     Se non c'è spazio, manda a capo automaticamente. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  
  /* Spazio tra le righe e le colonne */
  gap: var(--spazio-lg); 
}

4. La sezione Hero con Media Query

La sezione iniziale (.hero) ha il testo a sinistra e l’immagine a destra, ma solo se lo schermo è grande. Su mobile devono essere impilati: testo sopra, immagine sotto.

/* Mobile (default): lasciamo gli elementi impilati. */

/* Tablet e Desktop: Affianchiamo usando Grid */
@media (width >= 768px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne identiche: 50% e 50% */
    align-items: center; /* Centriamo verticalmente testo e immagine */
    gap: var(--spazio-xl);
  }
}

Con questi blocchi abbiamo la struttura responsive principale del portfolio: contenitore centrato, navigazione flessibile, griglia di progetti e hero adattabile.