Grille avec divisions de même hauteur

Je cherchais une méthode qui égalise la taille des divs en fonction de la div la plus haute. Je vous montre deux techniques, en plus d'un plugin qui fait le contraire, il diminue tous les divs à la hauteur du contenu le moins volumineux.

 
 
 
 
 
 
 
 

Pour voir ce qu'on veut créer :

 

Faire une grille avec CSS ou jQuery

 

Faire un table en CSS

Depuis HTML5 j'essaie d'éviter de construire des tables, pour le codage contemporain il est préférable d'utiliser les divs. Déjà, avec les divs, on ne va pas rencontrer de problèmes concernant les versions pour smartphones et tablettes portables. Avec CSS3 on peut créer des tables sans des balises <tables>. Je n'ai pas encore essayé cette méthode !

Emballez vos divs dans deux divs hiérarchiques comme les suivantes :

<div class="ma-table">
    <div class="ma-ligne">
        <div class="ma-cellule">quelques contenu</div>
        <div class="ma-cellule">quelques contenu</div>
        <div class="ma-cellule">quelques contenu</div>
        <div class="ma-cellule">quelques contenu</div>
        <div class="ma-cellule">quelques contenu</div>
        <div class="ma-cellule">quelques contenu</div>
    </div>
</div>

 

Puis appliquez le style suivant aux divs :

.ma-table {
    display: table;
}
.ma-ligne {
    display: table-row;
}
.ma-cellule {
    display: table-cell;
    width: 33%;
    min-width: 33%;
}

 

Faire une grille avec jQuery (hauteur la plus haute)

Il y a beaucoup de plugins jQuery sur le web qui produisent l'effet recherché, mais certains d'entre eux ne fonctionnent pas. J'en ai trouvé un qui fonctionne parfaitement.

Pour le faire fonctionner, vous avez besoin d'installer quatre fichiers .js :

  • jquery.js
  • underscore.js
  • html5shiv.js
  • equal-heights-responsive.js

Puis il faut initier le plugin "equal-heights-responsive" :

    $(document).ready(function() {
        $('.elements-pour-égaliser').equalHeights({
            //tous sont optionnels
            responsive:true,
            animate:true,
            animateSpeed:500
        });
    });

La source et le téléchargement → cliquez ici !

 

Faire une grille avec jQuery (hauteur la plus petite)

J'ai également trouvé un plugin, qui identifie la div la plus petite et qui diminue tous les divs à cette taille.

Les inconvénients :

  • il réduit uniquement le contenu type texte en paragraphe. Si vous avez d'autres types de contenu, par exemple des images, ce que vous pouvez faire, c'est que vous les placez hors du paragraphe et leur donner la même taille. Ce n'est pas une solution confortable car vous devez mettre des contenus obligatoirement et toujours à la même taille.
  • la taille des colonnes se diffèrent à la redimensionnement. Je n'ai pas testé pour les versions portables !

Ce plugin donne une possibilité de rajouter trois points (...) à la fin du paragraphe s'il n'est pas terminé.

Pour le faire fonctionner, vous avez besoin d'installer deux fichiers .js :

  • jquery.js
  • jquery.equalheightcols.js

L'auteur propose de construire la structure par une liste (<ul><il></li></ul>, mais la grille peut être composée par divs aussi) :

<div id="grille">
    <div>
        <strong>Titre 1: </strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua , vel illum qui dolorem eum. Vivamus convallis velit eget metus viverra laoreet. Morbi pulvinar lectus sit amet ligula fringilla scelerisque. Phasellus egestas faucibus dolor ac bibendum. Morbi luctus rhoncus tellus in ornare. Phasellus sed ipsum ac magna aliquet elementum ac sit amet metus. Praesent faucibus, augue at auctor fermentum, nisl leo vehicula ipsum, in lobortis tortor diam at ligula. Donec molestie id elit vitae mollis. Pellentesque suscipit et quam nec cursus. Cras at rhoncus orci, at faucibus tellus.</p>
    <a href="http://webdesign.igorlaszlo.com/blog/grille-divisions-meme-hauteur/">Read more &rarr;</a>
    </div>
    <div>
        <strong>Titre 2: </strong>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.Praesent in quam ut elit consequat rhoncus eleifend bibendum sapien. Aliquam tempor lacus at gravida iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris fringilla magna urna. Nullam sollicitudin nisl id pharetra vehicula.</p>
    <a href="http://webdesign.igorlaszlo.com/blog/grille-divisions-meme-hauteur/">Read more &rarr;</a>
    </div>
    <div>
        <strong>Titre 3: </strong>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    <a href="http://webdesign.igorlaszlo.com/blog/grille-divisions-meme-hauteur/">Read more &rarr;</a>
    </div>
    <div class="clearboth"></div>
</div>

 

Le code pour initier le plugin :

$('#grille').equalheightcols({
     itemsToEqualize : 'p';
     // si vous ne voulez pas des trois points, au lieu de "true", indiquez "false"
     threeDots : 'true';
});

 

Page de démo : cliquez ici !
Source (avec quelques différences) & téléchargement du fichier .js → cliquez ici !

 

Les commentaires sont fermés.