Créer des colonnes de même hauteur en CSS

Cela peut sembler évident à faire dans la théorie, mais en pratique créer des colonnes de même hauteur quel que soit le contenu de chacune d’elle demande de s’accorder un peu de temps de recherche, notamment si l’on souhaite la solution flexible et dépourvue de « hack » en JS. J’ai quelque chose pour vous !

Mettons-nous à table

L’une de ces solutions requiert l’utilisation des tableaux CSS (display: table-*;) mais apporte sont lots de spécificités, avec en vrac :

• vous devrez connaître le nombre d’éléments par ligne et ne pas en changer
• cette solution fonctionne dès IE8
• des positionnements avancés (absolute notamment) risquent de vous poser problème
• certains styles sur les colonnes seront difficiles à mettre en place

Outre ces quelques particularités, cette solution répond néanmoins à notre besoin qui est de créer des colonnes de même hauteur.
Voyons un exemple de code, avec un bout de HTML :

<div class="column-layout">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quia, quam delectus sequi odio fugit pariatur architecto, deleniti exercitationem quae adipisci ipsum ullam officia ea!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, quod voluptates, vel nostrum ea distinctio, a tempore voluptas reiciendis doloremque veniam, accusantium. Veritatis ipsum modi doloribus enim sint magnam, delectus dolorum, aperiam! Eaque dolor, veniam eum sunt dolorem nostrum. Dolores, corporis! Magnam, amet quas? Voluptates eaque quaerat quia inventore, earum eveniet hic alias rem atque neque ab, reprehenderit dolore culpa, blanditiis! Maiores enim rerum architecto voluptatibus cumque. Debitis accusamus ea aut incidunt voluptatibus quibusdam rem sint laboriosam qui sit odio expedita illum iste consectetur fugit eaque commodi pariatur, porro ex delectus officia ratione necessitatibus totam. Necessitatibus est autem et.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque velit dolores ipsa maiores molestias minus iusto nulla consequatur saepe. Aspernatur nulla optio laborum ducimus dignissimos nisi itaque aliquam doloremque, iure qui. Corporis quas atque minus, eveniet delectus officiis dolor, neque, animi, deleniti adipisci esse! Ullam nesciunt, nemo fugit totam itaque.</div>
</div>

Prenez volontairement des contenus variés, vous pouvez tester avec des images insérées dans l’une des divisions par exemple.

Le code CSS va être relativement court, il consiste simplement à créer les différentes cellules.

.column-layout {
  display: table;
  width: 100%;
  border-collapse: separate;
}
.column-layout > div {
  display: table-cell;
  width: 33.3333%; /* 100%/3 = 3 colonnes */
  padding: 20px;
  border: 5px #F2F2F2 solid;
  background: #FFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
}

Le conteneur des 3 cellules prend le comportement d’un tableau (l.2) d’une largeur de 100% (l.3).
Chacune des divisions enfant devient une cellule (l.7) et occupe 1 tiers de la largeur disponible (l.8).
Pour le reste c’est de la décoration.

Démonstration Fork on CodePen.io

Introduisons un peu de flexibilité

Une autre solution consiste en l’utilisation de Flexible box Layout Module, ce fameux module réécrit bon nombre de fois depuis 2009.
Cette solution est beaucoup plus flexible, comme son nom l’indique 🙂
Elle apporte également sont lot de spécificités :

• un minimum de connaissances sur ce nouveau module CSS
• une compatibilité à partir de IE10 (le fallback naturel reste convenable)
• une syntaxe un peu redondante pour un support optimal

Reprenez le même code HTML, mais appliquez ces styles à la place des précédents.

.column-layout {
  display: flex;
  flex-wrap: wrap;
}
.column-layout > div {
  display: flex;
  width: 47%;
  padding: 20px;
  margin: 10px 1.5%;
  background: #FFF;
  box-shadow: 0 0 3px rgba(0,0,0,0.05)
}

Ici je propose un système de deux colonnes.
Bien entendu, si vous avez besoin de 3 colonnes, renseignez la CSS comme suit :

.column-layout > div {
  width: 32%;
  margin: 10px 0.666%;
}

Du fait de ses différentes réécritures, les différents navigateurs et versions de navigateurs n’interprètent pas la même syntaxe de Flexbox, voici la syntaxe complète pour une prise en charge optimale.

  /* pour display */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 
  /* pour flex-wrap */
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

Les autres syntaxes (il en existe d’autres) représentent un nombre d’utilisateurs trop peu important pour être utiles ici.

Comme vous le constaterez à l’usage, cette solution est complète et permet toutes les extravagances possibles en terme de design et mise en page en colonnes.
Concernant la problématique du support en dessous de IE10, sachez que le fallback naturel fait simplement passer chaque colonne en ligne de contenu, ce qui n’est pas nécessairement problématique.

Démonstration Fork on CodePen.io

N’oubliez pas d’utiliser le modèle de boîte border-box pour reproduire ces démonstrations.