1 files changed, 93 insertions, 0 deletions
diff --git a/files/fr/web/css/css_columns/index.md b/files/fr/web/css/css_columns/index.md
new file mode 100644
index 0000000000..80a7ed7f0a
--- /dev/null
+++ b/files/fr/web/css/css_columns/index.md
@@ -0,0 +1,93 @@
+---
+title: Colonnes CSS
+slug: Web/CSS/CSS_Columns
+tags:
+  - Aperçu
+  - CSS
+  - CSS Multi-column Layout
+  - Reference
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les colonnes CSS</strong> (<em>CSS Multi-column Layout</em> en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe <code>container</code>. La valeur de la propriété <code>column-count</code> est <code>3</code>, et le contenu est donc arrangé entre trois colonnes de tailles égales.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<h2 id="Liens_avec_le_module_de_spécification_CSS_Fragmentation">Liens avec le module de spécification CSS Fragmentation</h2>
+
+<p>La disposition en colonnes est fortement liée aux <a href="/fr/docs/Web/CSS/CSS_Pages">média paginés</a> pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_relatives_à_la_disposition_en_colonnes">Propriétés relatives à la disposition en colonnes</h3>
+
+<ul>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+
+<h3 id="Propriétés_relatives_à_la_fragmentation">Propriétés relatives à la fragmentation</h3>
+
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Concepts de base relatifs à la disposition en colonnes</a></dt>
+ <dd>Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes">Mettre en forme les colonnes</a></dt>
+ <dd>Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Répartir_entre_les_colonnes">Équilibrer le remplissement des colonnes</a></dt>
+ <dd>Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes">Gérer le dépassement</a></dt>
+ <dd>Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes">Gérer la fragmentation du contenu en multi-colonnes</a></dt>
+ <dd>Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les autres modules liées aux dispositions possibles en CSS :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS (<em>CSS Grid</em>)</a></li>
+</ul>