Disposition en colonnes - CSS | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
View in English Always switch to English
Il vous faut souvent créer une mise en page comportant plusieurs colonnes, et CSS offre plusieurs moyens d'y parvenir. Le choix entre les dispositions à plusieurs colonnes, flexible ou grille dépend de l'objectif visé ; dans cette recette nous explorons ces options.
Voici quelques modèles de mise en page que vous pouvez vouloir obtenir avec des colonnes :
Il faut choisir des méthodes de mise en page différentes selon l'objectif à atteindre.
Si vous créez des colonnes avec la mise en page multi-colonnes, votre texte reste un flux continu qui remplit chaque colonne à tour de rôle. Les colonnes ont toutes la même taille et il n'est pas possible de cibler une colonne individuelle ni le contenu d'une colonne individuelle.
Vous pouvez contrôler l'écart entre les colonnes avec les propriétés column-gap ou gap, et ajouter une règle entre les colonnes avec column-rule.
Cliquez sur « Exécuter » dans les blocs de code ci‑dessous pour modifier l'exemple dans le MDN Playground :
Dans cet exemple, nous utilisons la propriété column-width pour fixer une largeur minimale que doivent avoir les colonnes avant que le navigateur n'ajoute une colonne supplémentaire. La propriété raccourcie columns permet de définir column-width et column-count, l'une ou l'autre pouvant fixer le nombre maximal de colonnes autorisées.
Quand utiliser le multi-colonne :
Flexbox peut être utilisé pour répartir du contenu en colonnes en réglant display: flex; pour transformer un élément parent en conteneur flex. Ajouter cette seule propriété transforme tous les enfants (éléments enfants, pseudo-éléments et nœuds texte) en éléments flex alignés sur une seule ligne. Définir la propriété raccourcie flex avec une seule valeur numérique répartit également tout l'espace disponible, ce qui rend généralement tous les éléments flex de la même taille tant qu'aucun n'a de contenu qui empêche le retour à la ligne et force une taille plus grande.
On peut utiliser des marges ou la propriété gap pour créer des espaces entre les éléments, mais il n'existe actuellement aucune propriété CSS qui ajoute des règles entre les éléments flex.
Pour créer une mise en page avec des éléments flex qui passent sur de nouvelles lignes, réglez la propriété flex-wrap du conteneur sur wrap. Notez que chaque ligne flex répartit l'espace pour cette ligne uniquement. Les éléments d'une ligne ne s'alignent pas nécessairement avec ceux d'autres lignes, comme le montre l'exemple ci‑dessous. C'est pourquoi flexbox est qualifié d'unidimensionnel : il est conçu pour contrôler la mise en page en ligne ou en colonne, mais pas les deux à la fois.
Quand utiliser flexbox :
Si vous voulez une grille bidimensionnelle où les éléments s'alignent en lignes et en colonnes, choisissez la mise en page CSS Grid. De la même manière que flexbox fonctionne sur les enfants directs du conteneur flex, la grille fonctionne sur les enfants directs du conteneur de grille. Il suffit de régler display: grid; sur le conteneur. Les propriétés définies sur ce conteneur — comme grid-template-columns et grid-template-rows — définissent la répartition des éléments sur les lignes et les colonnes.
Cliquez sur « Exécuter » dans les blocs de code ci‑dessous pour modifier l'exemple dans le MDN Playground :
Quand utiliser la grille :
Cette page a été modifiée le 10 juin 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.