Luca Perullo

Curriculum / avanzato

Layout moderno: Grid + Container Queries

Le media query (max-width) sono il passato. Grid areas, subgrid, @container e has() sono il presente.

Le media query non bastano più. Un componente in sidebar non è lo stesso in main, anche se la finestra è larga uguale. In 8 lezioni costruirai la dashboard dello studio di architettura "Nord": un portfolio di progetti che si adatta al SUO container — non al viewport. Userai Grid con auto-fit e areas, subgrid per allineare child elements alla griglia del padre, container queries per il vero responsive a livello componente, container query units per font fluidi, aspect-ratio, scroll-snap per gallery orizzontali e has() per styling condizionato. Tutto quello che il CSS del 2026 ti permette — e che molti dev ancora non sanno usare.

Inizia adesso90 min · 8 lezioni

Grid moderno: auto-fit, areas, subgrid01

repeat(auto-fit, minmax()), grid-template-areas con sidebar/header/main, e subgrid per allineare i figli alla griglia del padre.

  1. 01Grid auto-fit: la griglia che si conta da sola2 min
  2. 02Grid areas: il layout che si disegna a parole2 min
  3. 03Subgrid: il figlio si allinea alla griglia del padre2 min
  4. 04Container Queries: il componente si guarda allo specchio3 min

Container Queries: il vero responsive02

@container per stilare in base alla larghezza del componente, non del viewport. Container query units cqw/cqh per tipografia fluida.

  1. 05cqw e cqh: tipografia che cresce con il container2 min
  2. 06aspect-ratio: card che mantengono le proporzioni2 min
  3. 07Scroll-snap: gallery orizzontale che si incolla2 min
  4. 08:has() — il selettore che il CSS aspettava da 20 anni3 min

Card moderne: aspect-ratio, scroll-snap, has()03

Proporzioni stabili con aspect-ratio, gallery orizzontali con scroll-snap, styling condizionato con :has().