---
title: Ricette per layout in CSS
slug: Web/CSS/Layout_cookbook
translation_of: Web/CSS/Layout_cookbook
original_slug: Web/CSS/Ricette_layout
---
<div>{{CSSRef}}</div>

<p class="summary">Lo scopo del ricettario per layout in CSS è quello di raccogliere schemi per layouts utili per le tue pagine. In aggiunta a ricevere codice per iniziare i propri progetti, queste ricette sottolineano le differenti modalità e decisioni nel design di layouts messe a disposizione per sviluppatori.</p>

<div class="note">
<p><strong>Nota</strong>: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>, che darà le basi per fare pieno uso delle seguenti ricette.</p>
</div>

<h2 id="Le_Ricette">Le Ricette</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Ricetta</th>
   <th scope="col">Descrizione</th>
   <th scope="col">Metodi di layout</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Oggetti media</a></td>
   <td>Una scatola con due colonne avente un immagine su un lato e del testo descrittivo nell'altro, p.es: un post su facebook o un tweet.</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Colonne</a></td>
   <td>Quando scegliere un layout a più colonne, un flexbox o una griglia per le colonne</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Centrare un elemento</a></td>
   <td>Come centrare un oggetto orizzontalmente e verticalmente</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Note a piè di pagina appiccicose</a></td>
   <td>Creare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. </td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Navigazione divisa</a></td>
   <td>Uno schema nel quale alcuni link sono visualmente separati da altri.</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Navigazione a briciole</a></td>
   <td>Creare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.</td>
   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Contribuire_al_ricettario">Contribuire al ricettario</h2>

<p>Come  con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">Guarda questa pagina</a> per trovare un template e delle linee guida per scrivere il tuo esempio.</p>