Disposition en colonnes
=======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

![three different styles of layouts which have two columns in the container.](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts/cookbook-multiple-columns.png)

Prérequis
---------

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

* Un fil continu qui se divise en colonne, à la façon d'un journal papier.
* Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
* Plusieurs lignes et colonnes qui sont alignées.
Les « recettes »
----------------

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

### Un fil continu de contenu - Disposition multi-colonnes

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

L'espacement entre les colonnes peut être géré avec la propriété `column-gap` et il est possible d'ajouter une ligne de délimitation grâce à `column-rule`.

**Note :** Télécharger cet exemple

On utilisera une disposition multi-colonnes lorsque :

* On souhaite organiser le texte à la façon d'un journal imprimé
* On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
* Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.
### Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété `flex-direction` utilisée avec la valeur `row`. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés `column-gap` et `row-gap` est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

**Note :** Télécharger cet exemple

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété `flex-wrap` et la valeur `wrap` sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

**Note :** Télécharger cet exemple

On utilisera les boîtes flexibles pour :

* Organiser des lignes ou colonnes d'objets indépendantes
* Aligner les objets sur l'axe orthogonal au sens de lecture
* Les cas où l'alignement d'une ligne sur l'autre n'est pas important
### Aligner des objets en lignes et colonnes — Utilisation d'une grille

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

**Note :** Télécharger cet exemple

On utiliser les grilles CSS lorsque :

* On a des éléments/objets à organiser sur plusieurs lignes et colonnes
* On souhaite pouvoir aligner les éléments sur les deux axes
Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Guide pour les dispositions multi-colonnes
* Guide pour les boîtes flexibles (*flexbox*)
* Guide pour les grilles CSS