Aligner correctement une grille de divisions de hauteurs 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.

▼Publicité

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.

divisions mal alignées

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 :

HTML

<div class="container">

    <div class="row grillechalets">

        <div class="col-lg-3 col-sm-4 col-xs-6">

            <h2>La maison champêtre</h2>

            <a href="#" class="thumbnail">

                <img src="http://mondomaine.com/medias/commun/chalets/chalet1/chalet1.png" alt="chalet 1" title="chalet 1" class="img-responsive">

                <div class="caracteristiques">

                    <table>

                    <tr>

                        <td class="icone"><img src="http://mondomaine.com/medias/commun/icone-emplacement.svg" alt="emplacement" title="emplacement"></td>

                        <td>Québec</td>

                    </tr>

                    ...

                    </table>

                </div>

            </a>

        </div>

        ...

    </div>

</div>

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).

CSS

.grillechalets > div:last-child {

   clear: right;

}

 

/* écrans pour lesquels les classes col-xs-X s'appliquent */

/* on utilise col-xs-6 alors on veut le clear à tous les 2 items */

/* inspiré de http://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap */

@media (max-width: 767px) {

    .grillechalets > div:nth-child(2n+1) {

        clear: left;

    }

}

 

/* écrans pour lesquels les classes col-sm-X s'appliquent */

/* on utilise col-sm-4 alors on veut le clear à tous les 3 items */

@media (min-width: 768px) and (max-width: 991px) {

    .grillechalets > div:nth-child(3n+1) {

        clear: left;

    }

}

 

/* écrans pour lesquels les classes col-md-X s'appliquent */

/* on n'a pas de col-md alors c'est le col-sm-4 qui entre en action */

@media (min-width: 992px) and (max-width: 1199px ) {

    .grillechalets > div:nth-child(3n+1) {

        clear: left;

    }

}

 

/* écrans pour lesquels les classes col-lg-X s'appliquent */

/* on utilise col-lg-3 alors on veut le clear à tous les 4 items */

@media (min-width: 1200px) {

    .grillechalets > div:nth-child(4n+1) {

        clear: left;

    }

}

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.

Items bien alignés

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.

Items bien alignés sur petit écran

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories