1 files changed, 78 insertions, 0 deletions
diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..31a85170fa
--- /dev/null
+++ b/files/it/learn/css/css_layout/index.html
@@ -0,0 +1,78 @@
+---
+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
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">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.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Per affrontare questo modulo è necessario:</p>
+
+<ol>
+ <li>Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [<a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>].</li>
+ <li>Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].</li>
+ <li>Comprendere come assegnare uno stile ai riquadri [<a href="it/docs/Learn/CSS/Building_blocks">Styling boxes</a>].</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: 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 <a href="http://jsbin.com/">JSBin</a> oppure <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<p>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.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduzione ai layout CSS [Introduction to CSS layout]</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flusso normale [Normal flow]</a></dt>
+ <dd>Gli elementi di una pagina web si dispongono secondo un <em>flusso normale</em>, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox [Flexbox]</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox [Flexbox]</a> è 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 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">[test your flexbox skills]</a> per accertarti di averlo compreso prima di passare all'argomento successivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Griglie [Grids]</a></dt>
+ <dd>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 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">[test your grid skills]</a> prima di passare all'argomento successivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elementi float [Floats]</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posizionamento [Positioning]</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Layout multicolonna [Multiple-column layout]</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Design reattivo [Responsive design]</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guida per principianti alle media query [Beginner's guide to media queries]</a></dt>
+ <dd>Le <strong>media query CSS</strong> 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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">I metodi di layout legacy [Legacy layout methods]</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporto per i browser più datati [Supporting older browsers]</a></dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]</a></dt>
+ <dd>Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Esempi pratici di posizionamento [Practical positioning examples]</a></dt>
+ <dd>Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.</dd>
+</dl>