Mise en page à trois colonnes adaptative

Composition n° 12 avec du bleu par Piet Mondrian (1936-1942) - Source : Musée des beaux-arts du Canada

Si c’est une affaire de rien avec la librairie Bootstrap, on peut facilement s’en passer pour créer un système de grille (Grid). Bootstrap ratisse large, 12 colonnes sur 6 points d’arrêt (Breakpoints). Quand on pense que la largeur d’une disposition (Layout) Bootstrap est de 1200 maximum, qui a besoin de 12 colonnes? À ce compte-là aussi bien un tableau HTML (table).

Bootstrap n’a pas vraiment le choix, c’est une librairie qui doit tenir compte de chaque exception. Vous pouvez toujours modifier la librairie pour l’optimiser selon vos besoins. Mais en y pensant bien, il y a la disposition de la page en tant que t-elle et puis quoi? La grande majorité des sites Web n’aligne sur une même ligne que trois voir quatre éléments. Deux en version tablette et une seule en version mobile. Ça commence à limiter grandement les choix. Sans parler que depuis Bootstrap 2, le Cascading Style Sheets (CSS3) a grandement évolué.

D’ailleurs, j’ai beau essayer le « card layout » prédéfini de Bootstrap, ce n’est jamais satisfaisant. Dans un monde idéal peut-être, mais à chaque fois mon contenu est trop large pour les colonnes!

Méthode conventionnelle

Maintenant, il y a plusieurs méthodes, voilà la conventionnelle qui consiste à aligner à gauche des blocs de largeur définie. En commençant par le conteneur (Container). Ici, comme Bootstrap à 1200 pixels de large qu’on dispose au centre de la page avec une marge automatique à droite et à gauche. J’ajoute une ligne (row) question de « clairer » (clear) l’alignement à gauche :

.conteneur {
  max-width:1200px;
  margin:0 auto;
}

.ligne:after {
  content: "";
  display: table;
  clear: both;
}

Ensuite les colonnes adaptatives et en pourcentage qu’on va aligner à gauche (float). Évidement en « Mobile first » c’est-à-dire 100% par défaut, puis 50% à partir d’un écran de 576 pixels, 33.33% pour les écrans de 768 pixels et 25%, soit 4 colonnes pour 992 pixels et plus. Encode une fois, quatre largeurs (Breakpoints) suffisent amplement pour répondre à la grande majorité des besoins. À la limite, vous pouvez ajouter un point d’arrêt si jamais votre design l’exige. Par expérience, vous aurez plutôt tendance à en enlever un!

/* Mobile (1 colonne) */
.colonne {
  width: 100%;
}

/* Tablette */
@media (min-width: 576px) {
  .colonne {
    float: left;
    width: 50%;
  }
}
    
/* Grosse tablette */
@media (min-width: 768px) {
  .colonne {
    float: left;
    width: 33.33%;
  }
}
    
/* Bureau */
@media (min-width: 992px) {
  .colonne {
    float: left;
    width: 25%;
  }
}

C’est tout. Tout est dans le dosage, avec 3 colonnes maximum, l’idéale est d’avoir 6 items ou 6 colonnes de suite. Avec 4 colonnes, vous aurez une disposition entièrement équilibré en affichant 12 items, soit 3 lignes. Voilà l’exemple complet avec 4 colonnes équilibrées.

<!doctype html>
<html lang="fr-ca">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Trucsweb.com - Mise en page à trois colonnes adaptative</title>
    <meta name="designer" content="Django Blais - Conception Oznogco Multimédia" />
    <meta name="generator" content="Neural v7.4.0 (https://neural.quebec) - Conception Oznogco Multimédia" />
    <meta name="dcterms.created" content="2022-02-27T15:48:34-05:00" />
    <style>
    .conteneur {
      max-width:1200px;
      margin:0 auto;
    }
    
    .ligne:after {
      content: "";
      display: table;
      clear: both;
    }

    /* Mobile */
    .colonne {
      width: 100%;
    }
    
    /* Tablette */
    @media (min-width: 576px) {
      .colonne  {
        float: left;
        width: 50%;
      }
    }
    
    /* Grosse tablette */
    @media (min-width: 768px) {
      .colonne  {
        float: left;
        width: 33.33%;
      }
    }
    
    /* Bureau */
    @media (min-width: 992px) {
      .colonne  {
        float: left;
        width: 25%;
      }
    }
    
    /* Styles seulement pour l'exemple */
    h1 {
      text-align:center
    }
    .pad {
      display: flex;
      align-items: center;
      justify-content: center;
      height:200px;
      text-align:center;
      background-color:#eee;
      margin:10px;
    }
    </style>
  </head>
  <body>
    <header>
      <h1>Trucsweb.com - Mise en page à trois colonnes adaptative</h1>
    </header>
    <main class="conteneur">
      <div class="ligne">
        <div class="colonne">
          <div class="pad">1</div>
        </div>
        <div class="colonne">
          <div class="pad">2</div>
        </div>
        <div class="colonne">
          <div class="pad">3</div>
        </div>
        <div class="colonne">
          <div class="pad">4</div>
        </div>
        <div class="colonne">
          <div class="pad">1</div>
        </div>
        <div class="colonne">
          <div class="pad">2</div>
        </div>
        <div class="colonne">
          <div class="pad">3</div>
        </div>
        <div class="colonne">
          <div class="pad">4</div>
        </div>
        <div class="colonne">
          <div class="pad">1</div>
        </div>
        <div class="colonne">
          <div class="pad">2</div>
        </div>
        <div class="colonne">
          <div class="pad">3</div>
        </div>
        <div class="colonne">
          <div class="pad">4</div>
        </div>
      </div>
    </main>
  </body>
</html>

Méthode avec la grille CSS (Grid)

Alors là c’est ce qui a motivé ce tutoriel, on parle ici de 5 lignes de code! Le fichier bootstrap-grid.css de Bootstrap pour faire la même chose défile 5051 lignes de code pour un poids lourd de 71ko! L’idée consiste à utiliser le nouveau « Grid » du CSS3. Un simple conteneur!

.conteneur {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Eh oui, rien d’autre, c’est fou! L’idée, une grille (Grid) en colonnes (grid-template-columns) avec des colonnes de 300px maximum. Le navigateur fait le reste. Ha oui, une petite marge de 1rem (grid-gap). Voilà l’exemple complet :

<!doctype html>
<html lang="fr-ca">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Trucsweb.com - Mise en page à trois colonnes adaptative méthode GRID</title>
    <meta name="designer" content="Django Blais - Conception Oznogco Multimédia" />
    <meta name="generator" content="Neural v7.4.0 (https://neural.quebec) - Conception Oznogco Multimédia" />
    <meta name="dcterms.created" content="2022-02-27T16:34:34-05:00" />
    <style> 
    .conteneur {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Styles seulement pour l'exemple */
    h1 {
      text-align:center
    }
    .pad {
      display: flex;
      align-items: center;
      justify-content: center;
      height:200px;
      text-align:center;
      background-color:#eee;
      margin:10px;
    }
    </style>
  </head>
  <body>
    <header>
      <h1>Trucsweb.com - Mise en page à trois colonnes adaptative méthode GRID</h1>
    </header>
    <main>
      <div class="conteneur">
        <div class="colonne">
          <div class="pad">1</div>
        </div>
        <div class="colonne">
          <div class="pad">2</div>
        </div>
        <div class="colonne">
          <div class="pad">3</div>
        </div>
        <div class="colonne">
          <div class="pad">1</div>
        </div>
        <div class="colonne">
          <div class="pad">2</div>
        </div>
        <div class="colonne">
          <div class="pad">3</div>
        </div>
      </div>
    </main>
  </body>
</html>

Exemple

Exemple à 4 colonnes :

.conteneur {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 10px;
}

Bootstrap 5

Cet exemple ne serait pas complet sans Bootstrap!

<!doctype html>
<html lang="fr-ca">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Trucsweb.com - Mise en page à trois colonnes adaptative méthode Bootstrap</title>
    <meta name="designer" content="Django Blais - Conception Oznogco Multimédia" />
    <meta name="generator" content="Neural v7.4.0 (https://neural.quebec) - Conception Oznogco Multimédia" />
    <meta name="dcterms.created" content="2022-02-27T16:45:53-05:00" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <style>
    /* Styles seulement pour l'exemple */
    .pad {
      display: flex;
      align-items: center;
      justify-content: center;
      height:200px;
      text-align:center;
      background-color:#eee;
      margin:10px;
    }
    </style>
  </head>
  <body>
    <header class="px-4 py-5 my-5 text-center">
      <h1 class="display-5 fw-bold">Trucsweb.com - Mise en page à trois colonnes adaptative méthode Bootstrap</h1>
    </header>
    <main class="container">
      <div class="row">
        <div class="col-md-6 col-xl-3">
          <div class="pad">1</div>
        </div>
        <div class="col-md-6 col-xl-3">
          <div class="pad">1</div>
        </div>
        <div class="col-md-6 col-xl-3">
          <div class="pad">1</div>
        </div>
        <div class="col-md-6 col-xl-3">
          <div class="pad">1</div>
        </div>
      </div>
    </main>
  </body>
</html>

Et enfin le Grid cards de Bootstrap, basé sur la grille CSS3.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>