Resumos

Il layout è l'arte di disporre gli elementi sulla pagina. Storicamente si usavano le tabelle (anni '90), poi i float (anni 2000), e oggi si usano Flexbox e CSS Grid.

Centrare il Contenuto

Per evitare che il sito si "spalmi" su schermi enormi (es. monitor 4K), rendendo il testo illeggibile, si usa un contenitore centrale.

Metodo Classico (Margin Auto)

Si definisce una larghezza massima per il contenitore e si impostano i margini laterali su auto.

.container {
    width: 960px;       /* Larghezza fissa */
    max-width: 100%;    /* Per mobile: non superare la larghezza schermo */
    margin: 0 auto;     /* 0 sopra/sotto, auto a destra/sinistra */
}

Tipi di Layout

1. Fixed-Width (Larghezza Fissa)

Le colonne hanno dimensioni in pixel (es. Sidebar 300px, Content 600px).

• Pro: Controllo preciso del design.
• Contro: Non si adatta agli schermi piccoli (crea scrollbar orizzontale) o lascia spazi vuoti su schermi grandi.

  2. Liquid / Fluid (Liquido)

  Le dimensioni sono in percentuale (%).

• Pro: Si adatta a qualsiasi schermo.
• Contro: Su schermi larghi le righe di testo diventano lunghissime (faticose da leggere).

  3. Elastic (Elastico)

  Le dimensioni sono in em o rem.

• Il layout scala in base alla dimensione del font impostata dall'utente.

  4. Responsive (Moderno)

  Combina layout fluidi con Media Queries (@media) per cambiare struttura a determinati "punti di rottura" (breakpoints). È quello che fa Bootstrap.

  Layout a Colonne (Tecniche)

  Metodo Vecchio: Float

  Si usava float: left per allineare i div. Richiede calcoli precisi delle percentuali e l'uso di clear per ripristinare il flusso.

  
  /* Sidebar */
  .sidebar {
  width: 30%;
  float: left;
  }

/ Contenuto / .content { width: 70%; float: left; }

/ Pulizia finale / .clearfix::after { content: ""; clear: both; display: table; }

### Metodo Moderno: Flexbox (Monodimensionale)
Ideale per barre di navigazione o allineare elementi in una riga/colonna.
```css
.container {
    display: flex; /* Attiva Flexbox */
}

.sidebar {
    flex: 1; /* Prende 1 quota di spazio */
}

.content {
    flex: 3; /* Prende 3 quote (quindi è il triplo della sidebar) */
}

Metodo Moderno: CSS Grid (Bidimensionale)

Ideale per definire l'intera griglia della pagina (righe e colonne insieme).

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr; /* Sidebar fissa 200px, resto flessibile */
    grid-gap: 20px; /* Spazio tra le colonne */
}