Multicolonnes en CSS3 : voici comment faire

Tutoriel CSS3 Multi-column Layout Voici comment utiliser le CSS Multi-column Layout Module. Des bonnes feuilles tirées de l'ouvrage HTML5 et CSS3 pour des sites Responsive Web Design, publié chez Eni.

1. Le principe d'utilisation

Le W3C propose le module CSS3 nommé CSS Multi-column Layout Module qui est en Candidate Recommendation au 12 avril 2011.

Ce module nous permet de créer des colonnes avec des gouttières dans lesquelles le texte va pouvoir s'écouler, passer d'une colonne à l'autre, comme ce que l'on peut obtenir dans un logiciel de PAO.

Ce module commence à être assez bien reconnu par les navigateurs récents, comme le montre le tableau du site Can I Use :

css
Tableau du site Can I Use. © ENI

Pour la plupart des navigateurs de bureau et de mobile, nous avons un support partiel. Vous notez que la présence des préfixes constructeurs, des préfixes des navigateurs est encore nécessaire.
 

2. Mise en place des colonnes

Pour créer nos colonnes, nous avons besoin d'un conteneur général qui peut être n'importe quel élément HTML. Ensuite dans ce conteneur, nous devons créer le colonnage. Pour ce faire, nous avons à disposition les propriétés suivantes :

 column-width qui détermine la largeur des colonnes. Exemple : column-width: 300. La valeur par défaut auto permet un ajustement automatique à la place disponible.

 column-count qui détermine le nombre de colonnes. Exemple : column-count: 3. La valeur par défaut auto indique que le nombre de colonnes est déterminé par une autre propriété comme column-width par exemple.

Si la propriété column-width est déterminée, la valeur column-count représente alors le nombre maximal de colonnes.

La syntaxe courte pour utiliser les deux propriétés est columns, notez bien la présence d'un s à la fin !

Exemples :

 columns: 300px; équivaut à column-width: 300px; column-count: auto;.

 columns: 2; équivaut à column-width: auto; column-count: 2;.

 columns: 3 auto; équivaut à column-width: auto; column-count: 3;.

Voici un exemple d'une mise en page à trois colonnes : le conteneur a une largeur fixée à 960 pixels (width: 960px;), il possède trois colonnes dont les largeurs sont automatiquement définies par la place disponible (columns: 3 auto;).

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Ma page Web</title>
  <meta charset="UTF-8" />
  <style>
    #conteneur {
       width: 960px;
       -webkit-columns: 3 auto;
       -moz-columns: 3 auto;
       columns: 3 auto;
    }
    #conteneur p {
       margin: 0;
       background-color: #dedede;
    }
  </style>
</head>
<body>
<div id="conteneur">
  <p><strong>Etiam</strong> habebis...</p>
  <p><strong>Vivamus</strong> sagittis lacus...</p>
  <p><strong>Petierunt</strong> uti sibi...</p>
</div>
</body>
</html>

Voici l'affichage obtenu :

css
Trois colonnes. © ENI

3. Mise en place des gouttières

Nous pouvons gérer l'espace entre les colonnes, les gouttières, grâce à la propriété column-gap qui accepte toutes les valeurs, sauf négatives et les pourcentages.

Exemple :

#conteneur {
  width: 960px;
  -webkit-columns: 3 auto;
  -moz-columns: 3 auto;
  columns: 3 auto;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}


Voici l'affichage obtenu :

css
Colonnes avec espaces. © ENI

Notez bien que le rendu peut être différent selon le navigateur utilisé.

Au milieu de ces gouttières, nous pouvons placer des filets verticaux avec les règles columnrule-color, couleur du filet, column-rule-style, style du filet et column-rulewidth, largeur du filet. Nous retrouvons les propriétés des bordures des boîtes. Nous pouvons aussi utiliser la syntaxe courte avec column-rule.

Exemple :

#conteneur {
  width: 960px;
  -webkit-columns: 3 auto;
  -moz-columns: 3 auto;
  columns: 3 auto;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  -webkit-column-rule: 1px solid #000;
  -moz-column-rule: 1px solid #000);
  column-rule: 1px solid #000;
}

Voici l'affichage obtenu :

css
Trois colonnes avec filets. © Eni

 

4. Mise en place des sauts de colonnes

 

Pour un meilleur confort de lecture, nous pouvons imposer des sauts de colonnes avec les propriétés break-before, break-inside et break-after. Les valeurs sont nombreuses pour break-before et break-inside : auto, always, avoid, left, right, page, column, avoid-page et avoid-column. Reportez-vous aux spécifications du W3C pour connaître l'utilisation de toutes ces valeurs.

Si nous voulons imposer un saut de colonne avant chaque paragraphe, nous utilisons cette syntaxe : break-before: column;.

#conteneur p {
  margin: 0;
  background-color: #dedede;
  break-before: column;
}

Attention cette propriété n'est reconnue que par les dernières versions d'Internet Explorer et Opera.

Voici l'affichage obtenu dans Opera :

css
Mise en place des sauts de colonnes. © Eni

5. Répartition sur plusieurs colonnes

La propriété column-span permet de répartir un élément sur plusieurs colonnes. La valeur all permet une répartition sur toutes les colonnes de la mise en page.

Pour cet exemple, ajoutons un titre <h2> dans notre conteneur :

<div id="conteneur">
  <h2>Cum sociis natoque...</h2>
  <P>...</p>
  ...
</div>

Voilà le sélecteur ajouté :

#conteneur h2 {
  column-span: all;
  -webkit-column-span: all;
}

Notez que cette propriété n'est pas reconnue par Firefox.

Voici l'affichage obtenu avec la dernière version d'Opera :

css
Passage d'un objet sur plusieurs colonnes. © Eni

6. Un générateur de multi-colonnes

Pour vous aidez à générer le code plus rapidement, vous trouverez à cette URL, un générateur de multi-colonnes en ligne, avec les préfixes constructeurs des navigateurs (sachant qu'Opera n'en a plus besoin).

css
Capture du générateur de multi-colonnes en ligne. © Eni

7. Les colonnes et le design responsive

Sur smartphone, la lecture d'une mise en page en colonnes n'est pas forcément la meilleure expérience utilisateur que nous pouvons proposer aux visiteurs de nos sites. Naturellement nous pouvons utiliser des requêtes de média pour avoir une mise en page en colonnes sur les écrans plus large et une mise en page sans colonne sur les smartphones.

Voici le code de la page HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Ma page Web</title>
   <meta charset="UTF-8" />
   <link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="conteneur">
   <h2>Cum sociis natoque...</h2>
   <p><strong>Etiam</strong> habebis sem dicantur...</p>
   <p><strong>Vivamus</strong> sagittis lacus vel...</p>
   <p><strong>Petierunt</strong> uti sibi concilium...</p>
</div>
</body>
</html>

Notez que nous n'avons plus les styles CSS dans la page HTML.

Par rapport à notre exemple précédent, il suffit d'intégrer les styles CSS dans une requête de média spécifiant la largeur minimale : @media screen and (min-width:768px) {...}.

Voilà le fichier CSS :

@media screen and (min-width:768px) {
  #conteneur {
    width: 960px;
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    columns: 3 auto;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule: 1px solid #000;
    -moz-column-rule: 1px solid #000);
    column-rule: 1px solid #000;
  }
  #conteneur p {
    margin: 0;
    background-color: #dedede;
    break-before: column;
  }
  #conteneur h2 {
    column-span: all;
    -webkit-column-span: all;
  }
}

Voici l'affichage sur un écran dont la largeur est supérieure à 768 pixels :

css
Colonnes et le design responsive. © Eni


Voici l'affichage sur un écran dont la largeur est inférieure à 768 pixels :

css
Affichage sur un écran dont la largeur est inférieure à 768 pixels. © Eni

Cet article est constitué à partir de bonnes feuilles tirées de l'ouvrage "HTML5 et CSS3 pour des sites Responsive Web Design" de Christophe Aubry publié chez Eni.

Les exemples de code de cette page sont contenus dans des fichiers à télécharger sur le CD livré avec l'ouvrage.

HTML / CSS