Le multicolonnage c'est la répartition automatique du contenu d'une page ou d'un bloc dans plusieurs colonnes. Ce type de mise en page qui est la base de tous les journaux, revues et magazines, a été pris en charge par les CSS seulement à partir de la version 3 qui introduit des propriétés pour gérer le nombre de colonnes, leur largeur et l'espace qui les sépare (la gouttière).

### Définir des colonnes

Le positionnement multicolonne s'applique aux éléments de type bloc, cellules de tableau ou bloc en-ligne.
Un élément multicolonne est défini par le W3C comme un élément dont la propriété column-count ou column-width n'a pas la valeur `auto`. Cet élément agit alors comme le conteneur de la disposition multicolonne.

Si on peut théoriquement spécifier column-count et column-width en même temps, l'algorithme utilisé pour calculer le nombre de colonnes utilisera seulement l'une ou l'autre des propriétés suivant les cas.

Un bloc multicolonne ne peut pas servir de conteneur pour des éléments en positionnement fixe (`position: fixed`) ou absolu (`position: absolute`).

#### Nombre de colonnes

column-count définit le nombre de colonnes que contient l'élément. La largeur des colonnes est automatiquement calculée par le navigateur.
Dans le cas ou la largeur de l'élément varie (suite à un redimensionnement de fenêtre par exemple), la largeur des colonnes est automatiquement agrandie ou rétrécie.

Exemple : nombre de colonnes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
body { column-count: 3; }

Quand on redimensionne la fenêtre d'exemple, on voit que la largeur des 3 colonnes augmente automatiquement pour remplir tout l'espace du conteneur (ici le corps de la page).

#### Largeur des colonnes

column-width définit la largeur souhaitée des colonnes. La largeur peut être spécifiée avec toutes les unités CSS, mais ne peut pas être un pourcentage. Le navigateur va afficher dans le conteneur le plus de colonnes possible avec la largeur souhaitée. Pour remplir complétement le conteneur, la largeur pourra être plus ou moins adaptée par le navigateur.
Dans le cas ou la largeur de l'élément varie (suite à un redimensionnement de fenêtre par exemple), le nombre de colonnes dans le conteneur est automatiquement augmenté ou diminué.

Exemple : largeur des colonnes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
body { column-width: 100px; }

Quand on redimensionne la fenêtre d'exemple, on voit que le nombre de colonnes augmente (ou diminue) automatiquement pour remplir tout l'espace du conteneur (ici le corps de la page). La largeur des colonnes ne change pas.

### Les gouttières

L'espace qui sépare 2 colonnes (la gouttière) est définit avec la propriété column-gap. La largeur de cet espace peut être spécifiée avec toutes les unités CSS, mais ne peut pas être un pourcentage. Toutes les gouttières dans un élément multicolonne auront la même largeur (pas d'individualisation possible).

Exemple : gouttières
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
section { column-count: 3; column-gap: 40px; width: 500px; margin: 1em auto; font-size: 13px; } p { text-align: justify; } h2 { margin: 0 0 1em 0; }

La grouttière peut être agrémentée d'un trait de séparation (ou liseré) qui est définit par 3 propriétés :

- column-rule-width pour la largeur du trait,
- column-rule-style pour le style du trait,
- column-rule-color pour la couleur.

Ces trois propriétés acceptent les même valeurs que celles possible pour définir la bordure des boîtes.

La propriété column-rule est un raccourci pour les 3 propriétés et donc à privilégier.

Exemple : trait de séparation
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
section { column-count: 3; column-gap: 40px; column-rule: 2px solid crimson; width: 500px; margin: 1em auto; font-size: 13px; } p { text-align: justify; } h2 { margin: 0 0 1em 0; }

Si dans les colonnes des éléments comme des images sont trop larges, ils peuvent dépasser dans la colonne adjacente (à ce jour, cela dépend encore du navigateur).
Dans l'exemple suivant, l'image dans la 2ème colonne pourra ainsi déborder sur la 3ème colonne (Gecko) ou être tronquée (Webkit).

Exemple : contenu tronqué
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <img src="../exemples/img/x_wing.png"> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
section { column-count: 3; column-gap: 40px; column-rule: 2px solid crimson; width: 500px; margin: 1em auto; font-size: 13px; } p { text-align: justify; } h2 { margin: 0 0 1em 0; }

### Contenu sur plusieurs colonnes

La propriété column-span permet de définir un élément qui s'étendra sur l'ensemble des colonnes de l'élément multicolonne.

Exemple : contenu sur plusieurs colonnes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu et le Prince d'Azkaban</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
h2 { column-span: all; margin: 0 0 0.5em 0; } section { column-count: 3; column-gap: 40px; column-rule: 2px solid crimson; width: 500px; margin: 1em auto; font-size: 13px; } p { text-align: justify; }

N'importe quel élément de type bloc du conteneur multicolonne peut être étendu sur l'ensemble des colonnes.
A remarquer que l'on ne peut pas étendre un élément sur seulement quelques colonnes : c'est toutes les colonnes (`all`) ou aucune (`none` par defaut).

Exemple : contenu sur plusieurs colonnes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu et le Prince d'Azkaban</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <img src="../exemples/img/x_wing.png"> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
h2 { column-span: all; margin: 0 0 0.5em 0; } img { column-span: all; display: block; margin: 1em auto; } p:nth-of-type(2) { column-span: all; } section { column-count: 3; column-gap: 40px; column-rule: 2px solid crimson; width: 500px; margin: 1em auto; font-size: 13px; } p { text-align: justify; }

### Equilibrer les colonnes

Le contenu des colonnes peut être équilibré avec la propriété column-fill. Par défaut, les colonnes seront remplies de façon séquentielle et auront différentes longueurs, mais la valeur `balance` permet de minimiser dans la mesure du possible les variations de longueur des colonnes.

L'exemple suivant montre 2 sections avec du contenu identique. La 2eme section est "équilibrée", mais aucune différence avec la 1ére section n'est notable.

Exemple : équilibrer le contenu des colonnes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu et le Prince d'Azkaban</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> <section> <h2>La Guerre des Etoiles du Milieu et le Prince d'Azkaban</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
section { column-count: 3; column-gap: 40px; column-rule: 2px solid crimson; width: 500px; margin: 1em auto; font-size: 13px; } section:last-of-type { column-fill: balance; } p { text-align: justify; }

### Gérer les changements de colonnes

Trois propriétés permettent de définir comment sont faits les changements de colonnes des éléments d'un conteneur multicolonne :

- break-before décrit le comportement du saut de colonne avant un bloc de contenu,
- break-inside décrit le comportement du saut de colonne à l'intérieur d'un bloc de contenu,
- break-after décrit le comportement du saut de colonne après un bloc de contenu.

Parmi les valeurs possibles de ces 3 propriétés, celles à utiliser dans les conteneurs multicolonnes sont :

- `column` pour toutjours forcer un saut de colonne,
- `avoid-column` pour éviter un saut de colonne.

Dans l'exemple suivant, un saut de colonne est forcé après le 1er paragraphe et un autre avant le dernier paragraphe. Remarquez que pour répondre à ces demandes une quatrième colonne est ajoutée par le navigateur.
Sauf cas exceptionnel, nous vous conseillons de ne pas forcer les saut de colonnes et de laisser le navigateur les gérer de façon naturelle.

Exemple : changement de colonne
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu et le Prince d'Azkaban</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
p:first-of-type { break-after: column; } p:last-of-type { break-before: column; } section { column-count: 3; column-gap: 40px; column-rule: 2px solid crimson; width: 500px; margin: 1em auto; font-size: 13px; } p { text-align: justify; }