Système de Grille CSS adaptatif et équipollent ;- )

Galerie Vittorio Emmanuele II - Milan (Auteur : Pratikshrestha - Magzimum Pro)

Aligner des boites de contenu avec différentes quantités d’informations tout en limitant les espaces vide. L’idéal est d’avoir des images de mêmes dimensions et un texte de la même longueur. C’est aussi la meilleure solution pour un beau résultat esthétique et optimisé. Équilibrée, l’information se digère mieux par notre cerveau. L’espace est occupé au maximum tout en permettant d’afficher plusieurs contenus sur une seule ligne.En utilisant toujours une description de 256 caractères par exemple. Des images en paysage ou portrait standard, mais toujours dans le même sens. Dans un monde idéal c’est une formalité, dans un système automatisé large publique, c’est loin d’être aussi évident. Et il n’y a rien de pire qu’une grille plein de trous!

Diviser les éléments;
Les aligner sur une ligne;
Dimensionner ou redimensionner chaque élément;
Repositionner les éléments;
Le tout adaptatif selon la résolution.

Voilà en gros le défi. Et les solutions sont légion, de la bonne vieille table HTML, de l’alignement à gauche conventionnel à la Bootstrap. Au péché mignon du JavaScript et sans oublier la colonne HTML5 ou le Flex « stretchable ». Les solutions ne manquent pas dont certaines spectaculaire comme le fameux « Masonry » ou « Isotope » de Dave DeSandro.

La division des éléments allant de soi (td, div, li..), commençons par l’alignement de bases.

NOTE : En attendant le support du système de grille du CSS3 et la propriété grid-columns capable de redimensionner et repositionner les entêtes, le texte et les images dans une grille extensible et adaptative.

.grille {
  grid-columns:50% * * 200px;
}

La bonne vielle Table HTML

Avant même de s’arracher les cheveux de la tête, il suffit d’une bonne vieille table HTML. Encore faut-il la comprendre, la pauvre. voir à ce sujet. Tableau en pure CSS versus table HTML et « Stylisez vos tableaux HTML »

Avec un tableau, il faut aligner les cellules sur une ligne, tout se fait par défaut :

<table>
  <tr>
    <td>50%</td>
    <td>50%</td>
  </tr>
</table>

Par défaut, tout le mystère est résolu, depuis les premiers pas du HTML! Bon on a ajouté depuis « table-layout: fixed; » question d’optimiser la Table HTML à la hauteur des objets modernes du DOM. Mais sinon c’est le même vieux code.

Attention, la plupart des framework CSS rendent inutilisable ce code lors de la remise à zéro de la feuille de style. En changeant la valeur par défaut du border-collapse... Et trop heureux d’avoir sous la main le Flex et le flot, sans pensé garder cette fonctionnalité pourtant native. Il faut donc rétablir le caractère CSS « separate » et « middle » de la cellule!

border-collapse: separate;
vertical-align:middle!important;

Voilà un exemple avec bordure, pour bien illustrer comme se comporte la table (en voie de disparition) par défaut, c’est-à-dire la table « border-collapse: separate; »! En commençant par la singularité de son « border-spacing »! Mais de quelle bordure il peut bien parler? Ce n’est pas ce qui manque dans une table HTML. C’est de 1 l’espace entre les lignes de la table, haut et bas compris. Et de 2, l’espace entre les colonnes, gauche et droite de la table y compris. En fait tout le monde la connait, c’est le « cellspacing » du HTML4 mais en deux valeurs. Ici dans un exemple équipollent et même adaptatif!

Notez que la Table HTML a aussi des « border: outset » et « border: inset » que je n’utilise pas ici...

1	2	3	4	5	6	7	8	9	10	11	12
1	2	3	4	5	6	7	8	9	10	11	12

Comme on peut voir, l’exemple est tout à fait équipollent, chaque cellule aura toujours la même dimension. sans effort. Il est aussi adaptatif. Avec un code par défaut, aucune remise à zéro, sans aucun problème de dimension, sans barre de défilement, sans alignement « flot », sans position négative ni ajustement JavaScript. Si ce n’était de son caractère adaptatif, on pourrait même se passer de CSS! C’est la table quasiment vierge avec l’alignement vertical facile!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<style>
.cTable {
  table-layout: fixed; /* Une seule lecture de la table */ 
  border-spacing: 10px 10px; /* Espace entre les ligne, Colonne */
  border-collapse: separate; /* Par défaut en principe */
}
.cTable td {
  text-align:center;
  padding:10px;
  margin:10px;
  vertical-align:middle!important; /* Par défaut en principe */
  background-color:#ccc;
}
/* Police dynamique */
.cTable td > h2 {font-size: 3.0vw;color:#555}
.cTable td > p {font-size: .8em;color:#666;}

/* Adaptatif */
@media screen and (max-width: 767px) {
  .cTable td {
    display: block;
    width:100%;
  }
}
</style>

<!DOCTYPE html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    <table class="cTable" style="width:100%;">
      <tr>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
      </tr>
      <tr>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
        <td><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></td>
      </tr>
    </table>
  </body>
</html>

Bien sûr cette méthode à ses limites, notamment au niveau du « @média query ». Mais pourquoi s’en passer!

La méthode « Float »

Avec « float » c’est déjà plus tordu, et il ne faut pas oublier box-sizing: border-box; pour inclure les marge et bordure à l’intérieur de l’élément.

<style>
  div {
    box-sizing: border-box;
    width:100%
  }
  .cItem {
     width:50%;
     float:left;
  }
</style>

<div class="cItem">50%</div> 
<div class="cItem">50%</div>

Un peu à la manière du « Dont overthink it grids (while we wait for flexbox!) » de CSS-Tricks ou encore de Bootstrap. C’est-à-dire de pousser les éléments à gauche dans un conteneur. Et pour simuler, la table qui gère pour nous une marge supplémentaire à droite (une marge à gauche sur les éléments empêche inévitablement le dernier élément d’avoir une marge à droite) on ajoute une marge négative à gauche et un « padding » équivalent à droite! Et la seule façon de se faire est bien entendu en modifiant systématiquement toutes les marges de la feuille de style à zéro. Ce qui implique de refaire l’ensemble des marges et ceci à chaque ouverture de la page! Bon cette méthode reste aussi très performante, surtout quand on la décortique et la sort de sa dépendance à Bootstrap comme l’exemple suivant.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Aucune limite au niveau du « @média query » mais impossible d’équilibrer la hauteur des éléments sans Javascript. Il faut donc forcer une hauteur, ici de 250 pixels. La marge est quant à elle fait avec la bordure qui se trouve à l’intérieur de l’élément en raison du box-sizing: border-box;. Noter l’usage d’un calque avec un fond dégradé au-dessus pour annoncer et adoucir le texte caché.


<style>
.cLigne .cLigne { 
  margin:  0 -1.5em;
  border:5px solid #d6d3ce;
}
.cLigne .cLigne {margin:  0 -1.5em;}
.col {padding: 0  1.5em;}
.cLigne:before, .cLigne:after {
  content: "";
  display: table;
}
.cLigne:after {clear: both;}
@media only screen { 
  .col {
    width: 100%;
    box-sizing: border-box;
    background-color:#eee;
    border:5px solid #fff;
  }
}
@media only screen and (min-width: 34em) {
  .col {
    float: left;
    width: 50%;
    height: 150px;
    min-height: 150px;
    overflow:hidden;
  }
}
@media only screen and (min-width: 54em) {
  .col {width: 33.33%;}
}
@media only screen and (min-width: 76em) {
  .col {width: 16.66%;}
}
</style>

<!DOCTYPE html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    <div class="cLigne">
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
    </div>
    <div class="cLigne">
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
    </div>
  </body>
</html>

Pour le dégradé, il faut ajouter un calque après chaque contenu.

<div class="cLigne">
    <div class="col"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p><div class="degrade">+</div></div>
    ...
</div>

Puis spécifier la position relative du parent, positionner notre calque de façon absolue, avec un fond dégradé, transparent à blanc :

...
@media only screen { 
  .col {
    width: 100%;
    box-sizing: border-box;
    background-color:#eee;
    border:5px solid #fff;
    position: relative;
  }
  .col .degrade { 
    position: absolute; 
    bottom: 0; 
    left: 0;
    width: 100%;  
    margin: 0;
    padding: 40px 0;
    background-image: linear-gradient(to bottom, transparent, white);
  }
}
...

La méthode avec ajustement JavaScript

Déjà l’équipollent ne va pas de soi contrairement à la table HTML! L’exemple Bootstrap fonctionne avec une petite astuce, en forçant d’abord une hauteur et en cachant ensuite le contenu qui déborde. On peut y appliquer un filtre, un dégradé sur le texte qui dépasse en bas, comme sur Google Play. Ce n’est pas très élégant. Impossible d’ajouter un « padding » en bas par exemple. L’idéal est donc de normaliser le contenu pour qu’il soit déjà de la même grandeur. Ça reste très simple et en pure CSS.

Sinon, je suis tombé un jour sur une petite fonction « eqHeights » très pratique que j’utilise beaucoup. Bon c’est triché et elle est dépendante de jQuery, mais le résultat est vraiment époustouflant. Cette fonction ajuste la hauteur de tous les éléments de classes « equal » selon la plus grande valeur. Regardez-le à l’œuvre! Faudrait un jour la refaire sans jQuery!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Wow, ça comment à avoir de l’allure n’est-ce pas?

<style>
.colEquip { padding: 0  1.5em; }
.cLigne:before, .cLigne:after {
    content: "";
    display: table;
}
@media only screen { 
  .colEquip {
    width: 100%;
    box-sizing: border-box;
    background-color:#eee;
    border:5px solid #d6d3ce;
    /* Petit animaton en prime */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
}
@media only screen and (min-width: 34em) {
  .colEquip {
    float: left;
    width: 50%;
  }
}
@media only screen and (min-width: 54em) {
  .colEquip {width: 33.33%;}
}
@media only screen and (min-width: 76em) {
  .colEquip {width: 16.66%;}
}
</style>

<!DOCTYPE html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    <div class="cLigne  equal">
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
    </div>
    <div class="cLigne  equal">
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
      <div class="colEquip"><h2>Lorem ipsum</h2><p>Lorem ipsum...</p></div>
    </div>
  </body>
</html>

Même si elle fonctionne toute seule, la fonction « eqHeights » devrait être actualisée à chaque redimensionnement de l’écran.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
/*================================================================*/
/* EQUAL HEIGHTS : fonction pour égalizer la hauteur d’éléments HTML.
/*================================================================*/
// Source : http://stackoverflow.com/questions/13029090/jquery-equal-height-responsive-div-rows
$.fn.eqHeights = function(options) {
  var defaults = {  
    child: false 
  };  
  var options = $.extend(defaults, options); 
  var el = $(this);
  if (el.length > 0 && !el.data('eqHeights')) {
    $(window).bind('resize.eqHeights', function() {
      el.eqHeights();
    });
    el.data('eqHeights', true);
  }
  if( options.child && options.child.length > 0 ){
    var elmtns = $(options.child, this);
  } else {
    var elmtns = $(this).children();
  }
  var prevTop = 0;
  var max_height = 0;
  var elements = [];
  elmtns.height('auto').each(function() {
    var thisTop = this.offsetTop;
    if (prevTop > 0 && prevTop != thisTop) {
      $(elements).height(max_height);
        max_height = $(this).height();
        elements = [];
    }
    max_height = Math.max(max_height, $(this).height());
    prevTop = this.offsetTop;
    elements.push(this);
  });
  $(elements).height(max_height);
};
$(window).load(function () {
	$('.equal').eqHeights();
});

Un autre exemple avec la méthode du « float » avec image

Cet exemple complet, avec animation et adapté au différent support, fonctionne tout simplement en alignant les éléments à gauche (float) et bien sûr « box-sizing » à « border-box » pour éviter d’occuper plus de 100% de la largeur. C’est vraiment la plus simple expression de cette méthode. Un peu comme la méthode que j’utilise sur la page d’accueil des Trucsweb plus le JavaScript.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

<style>
.galerieConteneur {
  width: 100%;
  margin: 0px auto;
}
.galerieItem {
  width: 16%;
  margin:  2% 2% 10px 2%;
  float: left;
  background-color:#eee;
  padding: 10px;
  box-sizing: border-box;
  /* Petit animaton en prime */
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  /* Solution Sans JavaScript */
  /*height: 300px;
  overflow: hidden;*/
}
.galerieItem img {max-width: 100%;}

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
  .galerieItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
  .galerieItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
  .galerieItem {width: 46%;	height: auto;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
  .galerieItem {width:100%;	height: auto}
  .galerieItem img {width: 100%;	height: auto;}
}
</style>

<div class="galerieConteneur equal">
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2016/milan-705880_1920-768x510.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/html5_local_storage.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/cri.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/html5_offline_storage.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>    	
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2014/280px-le_malade_imaginaire.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/Neith_Generatrice.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/observatoire_greenwich02.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/terre-planete-fragile.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/Route_de_la_Baie_James.jpg" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div class="galerieItem">
    <a href="#" style="height:140px;overflow:hidden;"><img src="http://www.trucsweb.com/documents/images/2015/framework.png" alt="" /></a>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
</div>

Méthode « Flex »

À court terme, il faudra préférer la méthode « Flex » du HTML5. Membre en règle du DOM, flexible comme un DIV et stable comme une table. La « nouvelle » méthode (display: flex;) est exactement comme une table HTML. Elle permet avec d’avoir des élément de la même dimension par défaut tout comme la table. Avec l’attribut align-items: stretch;.

Voici l’excellent exemple de Jack in the flexbox qui exploite plusieurs avantage de cette méthode, dont le pied de bloc avec margin-top: auto pour pousser un élément tout en bas, génial ; -)

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor

Alors là on est en voiture, simple mais tout aussi puissant! consultez le guide complet « A Complete Guide to Flexbox » par Chris Coyier - CSS-Tricks

<style>
* {box-sizing: border-box}
.cConteneur {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; /* valeur par défaut */
}
.cSection {
  display: flex;
  flex-direction: column;
  width: 32%;
}
.contenu {display: block; /* IE fix */}
.cSection footer {margin-top: auto;}
.cSection {padding: 10px;background: #eee;}
</style>

<div class="cConteneur">
  <section class="cSection">
    <header><h2>Lorem ipsum dolor</h2></header>
    <div class="contenu"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    <footer>Poied</footer>
  </section>

  <section class="cSection">
    <header><h2>Lorem ipsum dolor</h2></header>
    <div class="contenu"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    <footer>Poied</footer>
  </section>

  <section class="cSection">
    <header><h2>Lorem ipsum dolor</h2></header>
    <div class="contenu"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    <footer>Poied</footer>
  </section>
</div>

En colonne

Le défaut avec toutes ces méthodes, même si on ajuste la hauteur, c’est de ne pouvoir utiliser de contenu vraiment varié. Comme mélanger des images en format paysage avec des images en format portrait, etc. Même si les colonne du HTML 5 ne règle pas tout les problème, en se contentant de faire faire une rotation de 90 au problème (de la ligne à la colonne), elles permettent de simuler un effet de « Maçonnerie »! C’est seulement le bas qui peut jurer, mais avec la tendance des défilements infinis en Ajax, ça fait la job sans trop d’effort comme on dit!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.

Aucun trou, l’espace est entièrement utilisé, sans aucun script ni rognage agressif! À part le manque de compatibilité, cette solution permet un effet certain.

<style> 
.colonne {
  border:1px black solid;
  padding: 15px;
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
  -webkit-column-rule: 1px solid lightgrey; /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid lightgrey; /* Firefox */
  column-rule: 1px solid lightgrey;
}
.colonne img {width:100%}
</style>

<div class="colonne">
  <div>
    <img src="http://www.trucsweb.com/documents/images/2016/milan-705880_1920-768x510.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/html5_local_storage.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/cri.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/html5_offline_storage.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>    	
  <div>
    <img src="http://www.trucsweb.com/documents/images/2014/280px-le_malade_imaginaire.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/Neith_Generatrice.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/observatoire_greenwich02.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/terre-planete-fragile.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/Route_de_la_Baie_James.jpg" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
  <div>
    <img src="http://www.trucsweb.com/documents/images/2015/framework.png" alt="" />
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
  </div>
</div>

Framework

Il va sans dire qu’un « framework CSS » qui se respecte offre un système de grid. Cette revue ne serait pas complète sans un petit rappel. La plupart offre un système de grille adaptatif, avec marge et contre marge!

PURE Grids purecss.io

Exemple de grille PURE avec images adaptatives.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
  <div class="pure-g">
    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt="...">
    </div>
    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt=r"...">
    </div>
    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt="...">
    </div>
    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt="...">
    </div>

    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt="...">
    </div>
    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt="...">
    </div>
    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt="...">
    </div>
    <div class="pure-u-1-4 pure-u-lg-1-8">
        <img class="pure-img" src="..." alt="...">
    </div>
  </div>

Fundation 6 foundation.zurb.com

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.1.2/foundation.min.css">
<div class="row small-up-1 medium-up-2 large-up-4">
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
</div>

Bootstrap 4 v4-alpha.getbootstrap.com

Préfixe : .col-xs- (auto) .col-sm- (576px) .col-md- (720px) .col-lg- (940px) .col-xl- (1140px)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-1 col-sm-4 col-xl-2">
      One of three columns
    </div>
    <div class="col-xs-1 col-sm-4 col-xl-2">
      One of three columns
    </div>
    <div class="col-xs-1 col-sm-4 col-xl-2">
      One of three columns
    </div>
  </div>
</div>

Pure jQuery par Simon Steinberger / Pixabay

jQuery a bien sur un tas de solutions, un pas mal est « jQuery flexImages v1.0.4 ». Tout simple! On peut perdre de l’information en recadrant les images, mais il fonctionne bien, si ce n’était de sa dépendance avec jQuery... L’idée est basé sur l’allignement à gauche (float) sans plus.

<style>
  .flex-images { overflow: hidden; }
  .flex-images .item { float: left; margin: 1px; border: 1px solid #eee; box-sizing: content-box; overflow: hidden; position: relative;  }
  .flex-images .item img { display: block; width: auto; height: 100%; }
  .flex-images .item { margin: 1px; border: 0; }
  .flex-images  .item .img { position: absolute; left: 0; top: 0; right: 2px; bottom: 20px; }
  .flex-images .item>div.over{z-index:9999999;position:absolute;left:0;right:0;bottom:-15px;padding:10px 10px 8px;opacity:0;transition:.25s;background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);font-size:14px;color:#fff}
  .flex-images .item:hover>div.over{position:absolute;left:0;right:0;bottom:0;opacity:1}
  .flex-images .item div a:hover{background:rgba(255,255,255,.2)}
</style>

<div class="flex-images">
  <div class="item" data-w="200" data-h="150"><a title="[Titre]" href="[Url de l'image]"><img src="[Url de l'image]" alt="[Titre]"/></a><div class="over">[Titre]</div></div>
  ...
  <div class="item" data-w="200" data-h="150"><a title="[Titre]" href="[Url de l'image]"><img src="[Url de l'image]" alt="[Titre]"/></a><div class="over">[Titre]</div></div>
</div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://goodies.pixabay.com/jquery/flex-images/jquery.flex-images.js"></script>
<script>
  $('.flex-images').flexImages({rowHeight: 140});
</script>

Frédéric Gaudreau du Cap-Saint-Ignace

Frédéric Gaudreau du Cap-Saint-Ignace (2)

Gervais Tanguay de Saint-Mathieu-de-Rioux

Guylain Lévesque de Saint-Jean-de-Dieu

Martin Nadeau de Phohénégamook

Martin Nadeau de Phohénégamook (2)

Yves Malenfant de Saint-Jean-de-Dieu

Outils - Balais à dessin

Outils - Ciseaux à pierre

Outils - Marteaux

Outils - Produits

Outils - Rabots

Pose de pierre

Frédéric Gaudreau du Cap-Saint-Ignace

Frédéric Gaudreau du Cap-Saint-Ignace (2)

Gervais Tanguay de Saint-Mathieu-de-Rioux

Guylain Lévesque de Saint-Jean-de-Dieu

Martin Nadeau de Phohénégamook

Martin Nadeau de Phohénégamook (2)

Yves Malenfant de Saint-Jean-de-Dieu

Outils - Balais à dessin

Outils - Ciseaux à pierre

Outils - Marteaux

Outils - Produits

Outils - Rabots

Pose de pierre

Conclusion (2017)

Tout change très vite et en même temps c’est d’une lenteur. Ainsi une technique sur la table de travail de la W3C depuis 2004 vient tout juste d’être ajoutée à Google Chrome 57 en 2017! On est encore loin d’utiliser le display: grid quoiqu’Internet Explorer est compatible depuis la version 10. À suivre...

.conteneur {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.boite {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="conteneur">
  <div class="boite a">A</div>
  <div class="boite b">B</div>
  <div class="boite c">C</div>
  <div class="boite d">D</div>
  <div class="boite e">E</div>
  <div class="boite f">F</div>
</div>

Voir la spécification CSS Grid Layout Module Level 1 de la W3C (19 March 2017) et plein d’exemples sur Grid by Example