Clear_All
Sublim.design

Créer une grille en CSS : tutoriel pour intégrer facilement un Grid Layout

Publié le 23 septembre 2022

South

Sur une page web, les galeries d’images prennent souvent la forme d’un Grid Layout. Les éléments sont alors agencés sur plusieurs colonnes en préservant un ordre de lecture horizontal avec un résultat similaire à ce que propose le site Pinterest. Ce style d’affichage est communément appelé Masonry Grid Layout.

Le Grid Layout est une manière élégante pour positionner les tuiles et garantir un sur tous les écrans. Sa mise en place peut être facilité par l’utilisation d’un Framework CSS, d’un Script JS ou encore d’une librairie compatible avec JQuery (ou React). Le tutoriel suivant propose une solution beaucoup plus simple puisqu’elle fonctionne uniquement sur du CSS. En passant par une technologie Full CSS, on facilite considérablement l’intégration, on dispose d’un code plus léger, d’un d’affiche rapide et beaucoup plus performant.

Structurer la page web et utiliser les balises HTML5 selon les recommandations du W3W (World Wide Web Consortium)

Dans notre exemple, le Grid Layout sera placé à l’intérieur de la balise figure, un élément HTML5 généralement utilisé pour intégrer des images. Il est cependant possible d’utiliser un conteneur générique div mais pour des raisons liées au SEO, la balise figure semble plus adaptée. Chaque tuile sera ensuite matérialisée par un conteneur div à laquelle on appliquera une mise en forme spécifique selon le ratio du contenu graphique :

Codeindex.html
<html>
 <head>
  <title>Masonry Grid Layout</title>
 </head>
 <body>
  <figure>
   <div class="ratio_1"><span>A</span></div>
   <div class="ratio_3"><span>B</span></div>
   <div class="ratio_2"><span>C</span></div>
   <div class="ratio_2"><span>D</span></div>
   <div class="ratio_1"><span>E</span></div>
   <div class="ratio_1"><span>F</span></div>
   <div class="ratio_2"><span>G</span></div>
   <div class="ratio_1"><span>H</span></div>
   <div class="ratio_3"><span>I</span></div>
   <div class="ratio_3"><span>J</span></div>
   <div class="ratio_2"><span>K</span></div>
 </figure>
 </body>
</html>

Déclarations de la feuille de style CSS

On détermine ensuite les valeurs CSS de chaque élément. Pour faciliter la lecture de notre exemple, nous intégrons directement les déclarations de style entre les balises head du document HTML plutôt que de passer par une feuille de style déportée.

Codestyle.css
figure {
 position: relative;
 width: 50%;
 top: 0px;
 left: 50%;
 right: 50%;
 margin-left: -25%;
 grid-gap: 0px;
 grid-template-columns: repeat(3, 1fr); // Nombre de colonnes
 display: grid;
 float: left;
}
figure div {
 position: relative;
 width: 100%;
 height:0;
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
 overflow: hidden;
 float: left;
}
figure .ratio_1 {
 padding-bottom: 50%; // Images horizontales
 grid-row-end: span 1; // Hauteur du bloc
}
figure .ratio_2 {
 padding-bottom: 100%; // Images carrées
 grid-row-end: span 2; // Hauteur du bloc
 }
figure .ratio_3 {
 padding-bottom: 150%; // Images verticales
 grid-row-end: span 3; // Hauteur du bloc
 }
 figure span {
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #c2c4c6;
 background-size: cover;
 border: 1px solid #fff;
 float: left;
}

Ajouter un aperçu responsive à notre projet

Grâce à la spécification CSS3 Media Queries qui définit les valeurs de la feuille de style en fonction du périphérique de consultation, il est possible de modifier les réglages CSS selon la taille de l’écran. Dans notre exemple, nous choisissons d’adapter la largeur du bloc principal figure et de réduire le nombre de colonnes sur les écrans dont la résolution est inférieure à 1280 pixels. Les réglages Media Queries seront placées à la fin de notre feuille de style.

CodeCode
@media screen and (max-width: 1280px) {
 figure {
  width: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
  margin-left: 0px;
  grid-template-columns: repeat(2, 1fr);
 }
}

Code complet pour exécuter notre Grid Layout

Et voilà ! C’est tout ce qu’il faut pour réaliser un Masonry Grid Layout en CSS. Notre code est léger, il fonctionne sans aucune bibliothèque ni aucun Script complémentaire ! La propriété CSS background-image permettra de définir l’image à utiliser en arrière-plan de chaque tuile.

Codeindex.html
<html>
 <head>
  <title>Masonry Grid Layout</title>
  <style>
   figure {
    position: relative;
    width: 50%;
    top: 0px;
    left: 50%;
    right: 50%;
    margin-left: -25%;
    grid-gap: 0px;
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    float: left;
   }
   figure div {
    position: relative;
    width: 100%;
    height:0;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
    float: left;
   }
   figure .ratio_1 {
    padding-bottom: 50%;
    grid-row-end: span 1;
   }
   figure .ratio_2 {
    padding-bottom: 100%;
    grid-row-end: span 2;
    }
   figure .ratio_3 {
    padding-bottom: 150%;
    grid-row-end: span 3;
    }
    figure span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #c2c4c6;
    background-size: cover;
    border: 1px solid #fff;
    float: left;
   }
   @media screen and (max-width: 1280px) {
    figure {
     width: 100%;
     top: 0px;
     left: 0px;
     right: 0px;
     margin-left: 0px;
     grid-template-columns: repeat(2, 1fr);
    }
   }
  </style>
 </head>
 <body>
  <figure>
   <div class="ratio_1"><span>A</span></div>
   <div class="ratio_3"><span>B</span></div>
   <div class="ratio_2"><span>C</span></div>
   <div class="ratio_2"><span>D</span></div>
   <div class="ratio_1"><span>E</span></div>
   <div class="ratio_1"><span>F</span></div>
   <div class="ratio_2"><span>G</span></div>
   <div class="ratio_1"><span>H</span></div>
   <div class="ratio_3"><span>I</span></div>
   <div class="ratio_3"><span>J</span></div>
   <div class="ratio_2"><span>K</span></div>
 </figure>
 </body>
</html>

Téléchargez notre ressource complète au format ZIP pour l’adapter à votre projet.

DownloadTélécharger le code complet — 1,6Mo
North