Trucsweb.com

Trucsweb.com

CSS

Framework

RDFFav

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

Aligner des boites de contenu avec différentes quantités d’informations et comparer les méthodes.flex, @media,box-sizing, border-box, float, grid,transition,eqHeights,tableSystè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.

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

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

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

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

+

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

+

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

+

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

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

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

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

Pied

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.

Pied

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.

Pied

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.

Pied

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.

Pied

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.

Pied

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 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
Frédéric Gaudreau du Cap-Saint-Ignace (2)
Frédéric Gaudreau du Cap-Saint-Ignace (2)
Gervais Tanguay de Saint-Mathieu-de-Rioux
Gervais Tanguay de Saint-Mathieu-de-Rioux
Guylain Lévesque de Saint-Jean-de-Dieu
Guylain Lévesque de Saint-Jean-de-Dieu
Martin Nadeau de Phohénégamook
Martin Nadeau de Phohénégamook
Martin Nadeau de Phohénégamook (2)
Martin Nadeau de Phohénégamook (2)
Yves Malenfant de Saint-Jean-de-Dieu
Yves Malenfant de Saint-Jean-de-Dieu
Outils - Balais à dessin
Outils - Balais à dessin
Outils - Ciseaux à pierre
Outils - Ciseaux à pierre
Outils - Marteaux
Outils - Marteaux
Outils - Produits
Outils - Produits
Outils - Rabots
Outils - Rabots
Dernier
Pose de pierre
Frédéric Gaudreau du Cap-Saint-Ignace
Frédéric Gaudreau du Cap-Saint-Ignace
Frédéric Gaudreau du Cap-Saint-Ignace (2)
Frédéric Gaudreau du Cap-Saint-Ignace (2)
Gervais Tanguay de Saint-Mathieu-de-Rioux
Gervais Tanguay de Saint-Mathieu-de-Rioux
Guylain Lévesque de Saint-Jean-de-Dieu
Guylain Lévesque de Saint-Jean-de-Dieu
Martin Nadeau de Phohénégamook
Martin Nadeau de Phohénégamook
Martin Nadeau de Phohénégamook (2)
Martin Nadeau de Phohénégamook (2)
Yves Malenfant de Saint-Jean-de-Dieu
Yves Malenfant de Saint-Jean-de-Dieu
Outils - Balais à dessin
Outils - Balais à dessin
Outils - Ciseaux à pierre
Outils - Ciseaux à pierre
Outils - Marteaux
Outils - Marteaux
Outils - Produits
Outils - Produits
Outils - Rabots
Outils - Rabots
Dernier
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

Ressources
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 8474 - Pages vues : 8714
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @