Disposition sur plusieurs colonnes

Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.

Prérequis: Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif: Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.

Un exemple élémentaire

Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  « multicol ». Vous pourrez effectuer le suivi de cet article en  téléchargeant le fichier de depart multicol et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.

Notre point de départ contient un HTML très simple ; une enveloppe de la classe container dans laquelle nous avons placé un en‑tête et quelques paragraphes.

L'élément <div> de la classe container sera notre conteneur multi‑colonnes. Nous basculons dans une disposition multicol en utilisant l'une des deux propriétés column-count ou column-width. La propriété column-count crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :

.container {
  column-count: 3;
}

Les colonnes créées sont de largeur variable — le navigateur colcule automatiquement l'espace à donner à chacune d'entre elles.

<div class="container">
  <h1>Simple exemple <i>multicol</i></h1>
    
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
    
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
  dis parturient montes, nascetur ridiculus mus.</p>
</div>
.container {
  column-count: 3;
}

Modifiez la CSS pour utiliser column-width ainsi :

.container {
  column-width: 200px;
}

Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.

.container {
  column-width: 200px;
}  

Style des colonnes

Les colonnes créées avec multicol ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :

  • modifier la taille de l'espacement entre colonnes avec column-gap.
  • ajouter une règle entre colonnes avec column-rule.

En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété column-gap :

.container {
  column-width: 200px;
  column-gap: 20px;
}

Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec column-rule. De la même manière qu'avec la propriété border rencontrée dans les articles précédents, column-rule, forme abrégée de column-rule-color, column-rule-style et  column-rule-width, accepte les mêmes valeurs.

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}

Ajoutons des règles pour les divers styles et couleurs.

Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  column-gap. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.

Colonnes et coupures

Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur multicol, il est découpé en colonnes de texte pour permettre cette disposition.

Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé multicol pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.

<div class="container">
  <div class="card">
    <h2>Je suis un titre</h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
    </div>

    <div class="card">
      <h2>Je suis un titre</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
    </div>

    <div class="card">
      <h2>Je suis un titre</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
    </div>
    <div class="card">
      <h2>Je suis un titre</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
    </div>

    <div class="card">
      <h2>Je suis un titre</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
    </div>

    <div class="card">
      <h2>Je suis un titre</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
    </div>

    <div class="card">
      <h2>Je suis un titre</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.</p>
    </div>

</div>
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

Pour contrôler ce comportement, utilisons les propriétés stipulées dans CSS Fragmentation (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le multicol et les médias paginés. Par exemple, ajoutons la propriété break-inside avec la valeur avoid aux règles pour .card, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.

Il est également préférable d'ajouter l'ancienne propriété page-break-inside: avoid pour une meilleure prise en charge par les divers navigateurs.

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
  padding: 10px;
  margin: 0 0 1em 0;
}

Actualisez la page et les boîtes devraient rester entières.

.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

Résumé

Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.

Voir aussi

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab
Dernière mise à jour par : Dralyab,