Layout a due colonne con sidebar sticky
Struttura editoriale con contenuto principale fluido e colonna laterale che resta visibile durante lo scorrimento.
Quando si usa
Quando una pagina lunga contiene un indice, strumenti, collegamenti correlati o pubblicità che devono rimanere facilmente raggiungibili.
Perché si usa
CSS Grid consente di separare correttamente le colonne; minmax(0,1fr) impedisce ai blocchi di codice o alle immagini larghe di invadere la sidebar.
Vantaggi principali
- Soluzione riutilizzabile e adattabile
- Codice privo di dipendenze esterne
- Struttura commentabile e integrabile nel progetto
Anteprima del risultato
Il layout mostra una colonna principale e una barra laterale che può rimanere visibile durante lo scorrimento.
Contenuto
Testo principale della pagina con informazioni, articoli o schede.
Codice completo
Studia il flusso prima di copiarlo e provalo in un ambiente separato. Adatta sempre nomi, selettori, percorsi e controlli al progetto reale.
<div class="layout-editoriale">
<main class="contenuto">
<h1>Titolo della guida</h1>
<p>Contenuto principale della pagina...</p>
</main>
<aside class="laterale">
<nav aria-label="Indice della pagina">...</nav>
</aside>
</div>
<style>
.layout-editoriale{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.contenuto,.laterale{min-width:0}
.laterale{position:sticky;top:20px}
.contenuto pre{max-width:100%;overflow:auto}
@media(max-width:850px){.layout-editoriale{grid-template-columns:1fr}.laterale{position:static}}
</style>Da personalizzare: Larghezza della sidebar, distanza tra colonne, punto di interruzione e valore top.
Errore da evitare: Non dimenticare min-width:0 sugli elementi della griglia: senza questa regola i contenuti larghi possono rompere il layout.