CSS
Colonnes

Syntaxe

• count_colonne: auto | nombre | inherit | initial | unset;
• column-width: auto | length;
• colonne: [colonne-largeur] | [colonne-nombre];
• span_colonne: none | all | inherit | initial | unset;
• gap de colonne: normal | length | inherit | initial | unset;
• fill-fill: auto | balance | inherit | intial | unset;
• column-rule-color: color | inherit | initial | unset;
• column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit | initial | unset;
• column-rule-width: thin | medium | thick | length | inherit | initial | unset;
• règle-colonne: [column-rule-width] | [columm-rule-style] | [colonne-règle-couleur];
• break-after: auto | toujours | gauche | droite | recto | verso | page | colonne | région | éviter | éviter-page | éviter-colonne | éviter-région;
• break-before: auto | toujours | gauche | droite | recto | verso | page | colonne | région | éviter | éviter-page | éviter-colonne | éviter-région;
• break-inside: auto | détendre | éviter-page | éviter-colonne | éviter-région;

Exemple simple (nombre de colonnes)

La disposition multi-colonnes CSS facilite la création de plusieurs colonnes de texte.

Code

<div id="multi-columns">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</div>

.multi-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

Résultat

Largeur de colonne

La propriété column-width définit la largeur de colonne minimale. Si le nombre de column-count n'est pas défini, le navigateur affichera autant de colonnes que possible dans la largeur disponible.

Code:

<div id="multi-columns">
    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
</div>

.multi-columns {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

Résultat