--- title: Layout CSS slug: Learn/CSS/CSS_layout tags: - Beginner - CSS - Floating - Grids - Guide - Landing - Layout - Learn - Module - Multiple column - Positioning - alignment - flexbox - float - table translation_of: Learn/CSS/CSS_layout ---

A questo punto abbiamo già visto i fondamenti di CSS, come assegnare uno stile a un testo e come modificare lo stile e l'impostazione dei riquadri nei quali risiede il contenuto. Ora impareremo come posizionare i riquadri rispetto all'area di visualizzazione e l'uno rispetto all'altro. Abbiamo già appreso i prerequisiti necessari per approfondire il layout CSS, analizzare le diverse impostazioni di display, i moderni strumenti di layout quali flexbox, griglia CSS, posizionamento e alcune tecniche legacy che potrebbe comunque tornare utile conoscere.

Prerequisiti

Per affrontare questo modulo è necessario:

Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [Introduction to HTML].
Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [Introduction to CSS].
Comprendere come assegnare uno stile ai riquadri [Styling boxes].

Nota: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo JSBin oppure Glitch.

Guide

I seguenti articoli insegnano a utilizzare gli strumenti fondamentali di layout e le tecniche disponibili nel linguaggio CSS. Alla fine delle lezioni è previsto un test di valutazione per verificare la propria comprensione dei metodi di layout applicandoli a una pagina web.

Introduzione ai layout CSS [Introduction to CSS layout]: Questo articolo riassume alcune delle caratteristiche dei layout CSS già incontrate nei moduli precedenti (ad esempio i diversi valori di {{cssxref("display")}}) e introduce diversi concetti che affronteremo in questo modulo.
Flusso normale [Normal flow]: Gli elementi di una pagina web si dispongono secondo un flusso normale, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.
Flexbox [Flexbox]: Flexbox [Flexbox] è un metodo di layout monodimensionale per disporre gli elementi in righe e colonne. Gli elementi si espandono per riempire lo spazio extra e si contraggono per adattarsi a uno spazio più ridotto. Questo articolo ne spiega i concetti fondamentali. Dopo aver studiato la guida potrai testare le tue competenze su flexbox [test your flexbox skills] per accertarti di averlo compreso prima di passare all'argomento successivo.
Griglie [Grids]: La Griglia layout CSS è un sistema bidimensionale di layout per il Web. Permette di disporre i contenuti in righe e colonne, inoltre offre diverse funzionalità per semplificare la costruzione di layout complessi. Questo articolo contiene tutte le informazioni necessarie per iniziare a costruire il layout della pagina, quindi mettere alla prova le proprie abilità sulla griglia [test your grid skills] prima di passare all'argomento successivo.
Elementi float [Floats]: Originariamente usata per inserire le immagini all'interno di blocchi di testo, la proprietà {{cssxref("float")}} è diventata uno dei più comuni strumenti per creare layout multicolonna nelle pagine web. Con la comparsa di Flexbox e Griglia è tornata alla sua finalità originale, come spiegato in questo articolo.
Posizionamento [Positioning]: Il posizionamento permette di isolare gli elementi dal normale flusso della pagina assegnando loro un comportamento diverso, ad esempio sovrapporsi uno sull'altro o mantenere sempre la stessa posizione all'interno dell'area di visualizzazione del browser. Questo articolo spiega i differenti valori di {{cssxref("position")}} e come utilizzarli.
Layout multicolonna [Multiple-column layout]: Le specifiche del layout multicolonna offrono un metodo per strutturare il contenuto in colonne come sulla pagina di un quotidiano. L'articolo spiega come sfruttare questa caratteristica.
Design reattivo [Responsive design]: Con la comparsa di dispositivi di varie dimensioni in grado di accedere al Web, è nato il concetto di web design reattivo (o RWD, dall'inglese Responsive Web Design): un insieme di procedure che permettono alle pagine web di modificare il proprio layout e aspetto per adattarsi a diverse larghezze, risoluzioni, ecc. Si tratta di un'idea che ha cambiato il modo di progettare il Web multi-dispositivo e questo articolo aiuta a capire le principali tecniche necessarie a padroneggiarlo.
Guida per principianti alle media query [Beginner's guide to media queries]: Le media query CSS danno modo di applicare i fogli di stile CSS solo quando il browser e le condizioni del dispositivo corrispondono alle regole specificate, ad esempio "l'area di visualizzazione è più larga di 480 pixel". Le media query sono un elemento fondamentale del web design reattivo, poiché non solo permettono di stabilire layout differenti a seconda della grandezza dell'area di visualizzazione, ma anche di rilevare altre condizioni dell'ambiente in cui un sito viene riprodotto, ad esempio se l'utente usa un touchscreen o un mouse. In questa lezione impareremo innanzitutto la sintassi usata nelle media query e poi le applicheremo in un esempio reale che mostra come trasformare un design semplice in reattivo.
I metodi di layout legacy [Legacy layout methods]: Una caratteristica molto comune dei layout CSS sono i sistemi di griglia. Prima della Griglia Layout CSS cercavamo di realizzare l'impaginazione utilizzando elementi float o altre caratteristiche del layout. Il layout veniva concepito come un numero dato di colonne immaginarie (ad esempio 4, 6 o 12) all'interno delle quali inserire i contenuti. In questo articolo vedremo come funzionano questi metodi ormai obsoleti per capirne l'impostazione in caso dovessimo lavorare su progetti più datati.
Supporto per i browser più datati [Supporting older browsers]: In questo modulo consigliamo di usare Flexbox e Griglia quali principali metodi di progettazione. Va però considerato che alcuni utenti potrebbero visualizzare il nostro sito con browser più datati o che, semplicemente, non supportano i metodi da noi scelti. Bisogna sempre tenerne conto nel Web: man mano che nuove funzionalità vengono messe a punto, ciascun browser si concentra sull'implementarne alcune, a scapito di altre. Questo articolo spiega come usare le moderne tecniche del Web senza escludere chi utilizza tecnologia più datata.
Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]: Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.

Vedi anche

Esempi pratici di posizionamento [Practical positioning examples]: Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.