8.1 Aligner correctement une grille de divisions dont les hauteurs sont variables sous Bootstrap

Dans certaines situations, il peut être souhaitable d'afficher un nombre indéterminé d'items côte-à-côte dans une page Web. Afin d'obtenir le visuel désiré, il est intéressant d'entourer chaque item par une division. Ces divisions seront affichées l'une à côté de l'autre jusqu'à ce que toute la largeur de la page soit remplie. La division suivante sera affichée une ligne plus bas. Pour que les divisions soient affichées côte-à-côte, il faut qu'on leur applique une règle CSS float.

En raison de ce float, il peut être difficile d'aligner correctement les items lorsque la hauteur des divisions contenant chacun des items est variable.

Je vous présente dans cet article une technique pour bien aligner les items d'une grille à hauteur variable.

Dans l'exemple suivant, on voit que la troisième division affiche plus de contenu que la division qui suit, ce qui fait que la première division de la seconde ligne est mal alignée. J'ai ajouté une ligne rouge pour montrer que le haut de cette division est bel et bien trop haut par rapport au bas de la 3e division.

Dans un contexte simple, où on aurait toujours le même nombre d'items par ligne, peu importe la largeur de l'écran, il suffirait d'ajouter la règle CSS clear: left à la première division de chaque ligne. Mais lorsque le nombre d'items par ligne est différent selon la largeur de l'écran, cette solution ne fonctionne pas.

Par exemple, sous Bootstrap, les divisions contenant les items pourraient se voir attribuer les classes col-lg-3, col-sm-4 et col-xs-6 afin d'avoir 6 colonnes de large pour chaque division sur un très petit écran (donc 2 items côte-à-côte), 4 colonnes de large sur un petit écran (donc 3 items côte-à-côte) et 3 colonnes de large sur un grand écran (donc 4 items côte-à-côte). Ce type de configuration ne permet pas d'imposer manuellement un clear: left à la première division de chacune des lignes puisque le nombre d'items par ligne variera selon la largeur de l'écran.

Voici une technique qui permet de résoudre ce problème. Elle consiste à forcer un clear: left à tous les X items, où le X sera différent selon la largeur de l'écran.

Prenons par exemple le code HTML suivant :

Afin d'imposer un clear: left à la bonne division, nous utiliserons les styles suivants. Remarquez que chaque règle débute par la classe qui englobe l'ensemble des divisions (ici : grillechalets). Le style sera appliqué seulement aux divisons de descendance directe (l'opérateur > signifie que l'élément à droite doit être contenu directement dans l'élément de gauche).

Grâce à ces règles CSS, la première division de chaque ligne commencera nécessairement en-dessous de l'ensemble des divisions de la ligne précédente et ce, peu importe la largeur de l'écran.

Et grâce à la grille adaptative Bootstrap et à nos classes CSS qui en tiennent compte, l'alignement sera encore bien fait, peu importe la largeur de l'écran.