Trucsweb.com

Trucsweb.com

CSS

Structure CSS adaptative

RDFFav

Mise en page à trois colonnes adaptative

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).flex,float,animation,display,grid,grid-gap,grid-template-columns,repeat,auto-fit,minmaxMise en page à trois colonnes adaptative

Composition n° 12 avec du bleu par Piet Mondrian (1936-1942) - Source : Musée des beaux-arts du Canada
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
1
2
3
1
2
3

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>
Références
, 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

9/10 sur 1 revues.
       Visites : 3203 - Pages vues : 3285
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

.
@