initial commit

7 files changed, 622 insertions, 0 deletions

diff --git a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html
new file mode 100644
index 0000000000..2032e1c2c6
--- /dev/null
+++ b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html
@@ -0,0 +1,92 @@
+---
+title: Concepts de base pour la disposition multi-colonnes
+slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p>
+
+<h2 id="Concepts_et_terminologie">Concepts et terminologie</h2>
+
+<p>La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Pages">CSS Paged Media</a>.</p>
+
+<p>Les propriétés définies dans cette spécification sont :</p>
+
+<ul>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("columns")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+
+<p>En ajoutant <code>column-count</code> ou <code>column-width</code> à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.</p>
+
+<h2 id="Definir_des_colonnes">Definir des colonnes</h2>
+
+<p>Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété <code>column-*</code> (<code>column-count</code> ou <code>column-width</code>).</p>
+
+<h3 id="La_propriété_column-count">La propriété <code>column-count</code></h3>
+
+<p>La propriété <code>column-count</code> définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.</p>
+
+<p>Dans l'exemple qui suit, on utilise la propriété <code>column-count</code> afin de créer trois colonnes au sein de l'élément <code>.container</code>. Le contenu, y compris l'élément fils de <code>.container</code> est alors divisé en trois colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<p>Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionnent</a> pas avec les marges du conteneur.</p>
+
+<h3 id="La_propriété_column-width">La propriété <code>column-width</code></h3>
+
+<p>La propriété <code>column-width</code> est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour <code>column-width</code>, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir <code>column-width</code> comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.</p>
+
+<p>Il existe un seul cas où la boîte de colonne peut être plus petite que <code>column-width</code> : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à <code>column-width</code>.</p>
+
+<p>Dans l'exemple qui suit, on utilise la propriété <code>column-width</code> avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}</p>
+
+<h3 id="Utiliser_column-count_et_column-width">Utiliser <code>column-count</code> et <code>column-width</code></h3>
+
+<p>Si on définit les deux propriétés pour un conteneur multi-colonnes, <code>column-count</code> agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour <code>column-width</code> aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par <code>column-count</code> soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur <code>column-width</code>).</p>
+
+<p>Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec <code>column-count</code>.</p>
+
+<p>Dans l'exemple suivant, on utilise <code>column-width</code> avec une valeur de 200px et <code>column-count</code> avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}</p>
+
+<h3 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h3>
+
+<p>La <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> <code>columns</code> peut être utilisée afin de définir à la fois <code>column-count</code> et <code>column-width</code>. Si on utilise une unité de longueur, la valeur sera utilisée pour <code>column-width</code>, si on utilise un entier, la valeur sera utilisée pour <code>column-count</code>. Les deux peuvent être définies simultanément en étant séparées d'un espace.</p>
+
+<p>Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où <code>column-count</code> vaut 3.</p>
+
+<pre>.container {
+  columns: 3;
+}</pre>
+
+<p>Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où <code>column-width</code> vaut <code>200px</code>.</p>
+
+<pre>.container {
+  columns: 200px;
+}</pre>
+
+<p>Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés <code>column-count</code> et <code>column-width</code> sont définies.</p>
+
+<pre>.container {
+  columns: 2 200px;
+}</pre>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Styling_Columns">comment mettre en forme chacune des colonnes</a>.</p>
diff --git a/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html b/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html
new file mode 100644
index 0000000000..7dc6078442
--- /dev/null
+++ b/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html
@@ -0,0 +1,49 @@
+---
+title: Gestion du dépassement en multi-colonnes
+slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p>
+
+<h2 id="Le_dépassement_dans_les_boîtes_des_colonnes">Le dépassement dans les boîtes des colonnes</h2>
+
+<p>On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de <code>column-width</code> ou à la largeur des colonnes selon le nombre indiqué avec <code>column-count</code>.</p>
+
+<p>Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p>
+
+<p>Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et <code>max-width: 100%</code> pour y parvenir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
+
+<h2 id="Plus_de_colonnes_que_d'espace_disponible">Plus de colonnes que d'espace disponible</h2>
+
+<p>La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?</p>
+
+<p>Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.</p>
+
+<p>Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).</p>
+</div>
+
+<h2 id="Utiliser_les_requêtes_média_verticales">Utiliser les requêtes média verticales</h2>
+
+<p>Lorsque les colonnes sont plus hautes que la zone d'affichage (<em>viewport</em>), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.</p>
+
+<p>Dans l'exemple qui suit, on utilise par exemple une requête média avec <code>min-height</code> pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
+
+<p>Dans le dernier guide de cette série, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation</a> et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.</p>
diff --git a/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html b/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html
new file mode 100644
index 0000000000..909c9bd2a5
--- /dev/null
+++ b/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html
@@ -0,0 +1,72 @@
+---
+title: Gérer la rupture du contenu entre les colonnes
+slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p>
+
+<h2 id="Quelques_notions_de_bases_sur_la_fragmentation">Quelques notions de bases sur la fragmentation</h2>
+
+<p><a href="https://www.w3.org/TR/css-break-3/">Le module de spécification CSS Fragmentation </a>détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.</p>
+
+<p>Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.</p>
+
+<p>Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :</p>
+
+<ul>
+ <li>Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément <code>&lt;figure&gt;</code></li>
+ <li>Les ruptures avant et après les boîtes</li>
+ <li>Les ruptures entre les lignes</li>
+</ul>
+
+<h2 id="Les_ruptures_à_l'intérieur_des_boîtes">Les ruptures à l'intérieur des boîtes</h2>
+
+<p>Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>avoid</code></li>
+ <li><code>avoid-page</code></li>
+ <li><code>avoid-column</code></li>
+ <li><code>avoid-region</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, on a appliqué <code>break-inside</code> sur l'élément <code>figure</code> afin d'éviter que la légende soit séparée de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}</p>
+
+<h2 id="Les_ruptures_avant_et_après_les_boîtes">Les ruptures avant et après les boîtes</h2>
+
+<p>Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>avoid</code></li>
+ <li><code>avoid-column</code></li>
+ <li><code>column</code></li>
+</ul>
+
+<p>Avec l'exemple suivant, on force une rupture avant chaque élément de titre <code>h2</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}</p>
+
+<h2 id="Les_ruptures_entre_les_lignes">Les ruptures entre les lignes</h2>
+
+<p>On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  <code>orphans</code> contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété <code>widows</code> contrôle le nombre de lignes qui restent au début d'un fragment.</p>
+
+<p>Les propriétés <code>orphans</code> et <code>widows</code> prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.</p>
+
+<p>Dans l'exemple ci-après, on utilise la propriété <code>orphans</code> pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}</p>
+
+<h2 id="Résultat_non_garanti">Résultat non garanti</h2>
+
+<p>Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.</p>
+
+<p>De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.</p>
diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html
new file mode 100644
index 0000000000..b66e0686ea
--- /dev/null
+++ b/files/fr/web/css/css_columns/index.html
@@ -0,0 +1,97 @@
+---
+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>
+
+<div class="index">
+<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>
+</div>
+
+<h3 id="Propriétés_relatives_à_la_fragmentation">Propriétés relatives à la fragmentation</h3>
+
+<div class="index">
+<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>
+</div>
+
+<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>
diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html
new file mode 100644
index 0000000000..0689060daf
--- /dev/null
+++ b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html
@@ -0,0 +1,48 @@
+---
+title: Mettre en forme les colonnes
+slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes
+tags:
+  - CSS
+  - CSS Multi-column Layout
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Styling_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p>
+
+<h2 id="Peut-on_mettre_en_forme_les_boîtes_des_colonnes">Peut-on mettre en forme les boîtes des colonnes ?</h2>
+
+<p>Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.</p>
+
+<h2 id="L'espaceement_la_propriété_column-gap">L'espaceement : la propriété <code>column-gap</code></h2>
+
+<p>L'espacement entre les colonnes est contrôlé par la propriété <code>column-gap</code>. Cette propriété était initialement définie dans le module de spécification <em>Multi-column Layout</em> mais est désormais définie dans le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">les grilles CSS</a>).</p>
+
+<p>Dans une disposition multi-colonne, la valeur initiale de la propriété <code>column-gap</code> est <code>1em</code>. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de <code>column-gap</code> est 0. Le mot-clé <code>normal</code> est une valeur qui permet d'obtenir un écart de 1em.</p>
+
+<p>Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour <code>column-gap</code>. Dans l'exemple qui suit, on a ainsi paramétré <code>column-gap</code> avec la valeur 40px.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}</p>
+
+<p>Les valeurs autorisées pour <code>column-gap</code> sont de type <code>&lt;length-percentage&gt;</code>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.</p>
+
+<h2 id="Créer_un_délimiteur_entre_les_colonnes_column-rule">Créer un délimiteur entre les colonnes : <code>column-rule</code></h2>
+
+<p>La spécification définit les propriétés <code>column-rule-width</code>, <code>column-rule-style</code> and <code>column-rule-color</code> et fournit une propriété raccourcie <code>column-rule</code>. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour <code>border-style</code> pourra être utilisée pour <code>column-rule-style</code>.</p>
+
+<p>Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.</p>
+
+<p>Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est <code>rebeccapurple</code>, sans utiliser la propriété raccourcie.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}</p>
+
+<p>On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.</p>
+
+<p>Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment <a href="/fr/docs/Web/CSS/CSS_Columns/Spanning_Columns">propager les éléments du conteneur sur l'ensemble des colonnes</a>.</p>
diff --git a/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html b/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html
new file mode 100644
index 0000000000..d1116ebd7d
--- /dev/null
+++ b/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html
@@ -0,0 +1,63 @@
+---
+title: Répartir et équilibrer le contenu entre les colonnes
+slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Spanning_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.</p>
+</div>
+
+<h2 id="Étendre_sur_plusieurs_colonnes">Étendre sur plusieurs colonnes</h2>
+
+<p>Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur <code>all</code>. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.</p>
+
+<p>N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.</p>
+
+<p>Dans l'exemple qui suit, on a <code>column-span: all</code> appliqué sur l'élément <code>h2</code> qui s'étend ainsi sur toutes les colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}</p>
+
+<p>Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}</p>
+
+<p>Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.</p>
+
+<h3 id="Les_limites_de_column-span">Les limites de <code>column-span</code></h3>
+
+<p>Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour <code>column-span</code> : <code>none</code> qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et <code>all</code> qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.</p>
+
+<h3 id="Quelques_points_d'attention">Quelques points d'attention</h3>
+
+<p>Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}</p>
+
+<p>De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser <code>column-span</code> avec précaution pour éviter ces effets indésirables.</p>
+
+<h2 id="Équilibrer_et_remplir_les_colonnes">Équilibrer et remplir les colonnes</h2>
+
+<p>Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.</p>
+
+<p>La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est <code>balance</code>. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que <a href="/fr/docs/Web/CSS/CSS_Pages">les médias paginés</a>, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.</p>
+
+<p>La valeur <code>balance-all</code> permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).</p>
+
+<p>Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}</p>
+
+<p><code>auto</code> est une autre valeur qui peut être utilisée avec <code>column-fill</code>. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié <code>column-fill</code> pour utiliser <code>auto</code> et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}</p>
+
+<p>On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.</p>
+
+<p>Dans le prochain guide, nous verrons <a href="/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">comment gérer le dépassement au sein d'un conteneur multi-colonnes</a>, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.</p>
diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html
new file mode 100644
index 0000000000..897ac5c989
--- /dev/null
+++ b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html
@@ -0,0 +1,201 @@
+---
+title: Utiliser une disposition multi-colonnes
+slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>disposition multi-colonnes</strong> étend <em>le mode de disposition en bloc</em> et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.</p>
+
+<h2 id="Utiliser_les_colonnes_CSS">Utiliser les colonnes CSS</h2>
+
+<h3 id="Le_nombre_de_colonnes_et_leur_largeur">Le nombre de colonnes et leur largeur</h3>
+
+<p>Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.</p>
+
+<p>On utilisera la propriété <code>column-count</code> pour définir le nombre de colonnes qu'on souhaite avoir.</p>
+
+<h4 id="Utilisation_de_column-count">Utilisation de <code>column-count</code></h4>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">#col {
+  column-count: 2;
+}
+</pre>
+
+<h5 id="HTML">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="col"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-count','100%')}}</p>
+
+<p>Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.</p>
+
+<p>La propriété <code>column-width</code> permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété <code>column-count</code> n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.</p>
+
+<h4 id="Utilisation_de_column-width">Utilisation de <code>column-width</code></h4>
+
+<h5 id="CSS_2">CSS</h5>
+
+<div id="column_width">
+<pre class="brush: css">#wid {
+  column-width: 100px;
+}
+</pre>
+</div>
+
+<h5 id="HTML_2">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="wid"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_2">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-width','100%')}}</p>
+
+<p>En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.</p>
+
+<h4 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h4>
+
+<p>La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.</p>
+
+<p>Ainsi, la déclaration <code>column-width:12em</code> pourra être remplacée de la façon suivante :</p>
+
+<h5 id="CSS_3">CSS</h5>
+
+<div id="column_short">
+<pre class="brush: css">#col_short {
+  columns: 12em;
+}
+</pre>
+</div>
+
+<h5 id="HTML_3">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="col_short"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_3">Résultat</h5>
+
+<p>{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}</p>
+
+<p>De même, on pourra remplacer la déclaration <code>column-count: 4</code> avec ce bloc :</p>
+
+<div id="4_columns">
+<pre class="brush: css">#columns_4{
+  columns: 4;
+}
+</pre>
+</div>
+
+<p>Enfin, pour synthétiser les instructions <code>column-width:8em</code> et <code>column-count:12</code>, on pourra utiliser les instructions suivantes :</p>
+
+<div id="12_columns">
+<pre class="brush: css">#columns_12 {
+  columns: 12 8em;
+}
+</pre>
+</div>
+
+<h3 id="Équilibrage_de_la_hauteur">Équilibrage de la hauteur</h3>
+
+<p>La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.</p>
+
+<p>Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.</p>
+
+<h3 id="L'espacement_entre_les_colonnes">L'espacement entre les colonnes</h3>
+
+<p>Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est <code>1em</code>. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.</p>
+
+<h4 id="Utilisation_de_column-gap">Utilisation de <code>column-gap</code></h4>
+
+<h5 id="CSS_4">CSS</h5>
+
+<pre class="brush: css">#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}</pre>
+
+<h5 id="HTML_4">HTML</h5>
+
+<div id="col_gap">
+<pre class="brush: html">&lt;div id="column_gap"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_4">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}</p>
+
+<h2 id="Amélioration_progressive">Amélioration progressive</h2>
+
+<p>Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>