Ce tutoriel a pour objectif de vous montrer comment créer un masonry design avec Bootstrap 4 et adapter l’affichage des cartes(cards) sur tous les écrans. Ce tutoriel suppose que vous savez déjà ce qu’est Bootstrap et que vous l’avez déjà utilisé au moins une fois.
Le masonry est une bibliothèque JavaScript de disposition de grille. Il fonctionne en plaçant les éléments dans une position optimale en fonction de l’espace vertical disponible, un peu comme un maçon qui pose des pierres dans un mur. Vous l’avez probablement vu partout sur internet (ex : www.pinterest.com).
Aujourd’hui, la conception de boîtes avec des dimensions dynamiques rend difficile la conception des pages web. Ce type de mise en page est également plus difficile pour les utilisateurs, car la hauteur de la page augmente en raison des espaces supplémentaires. Cela nécessite un défilement inutile pour accéder au bas de page. Dans de tels scénarios, nous devons utiliser une boîte de taille fixe sur chaque ligne.
La disposition en masonry est la solution ultime à ce problème, car elle réduit les espaces et essaie d’ajuster le nombre maximal de boîtes dans les lignes et les colonnes.
Notez que la hauteur de la page est réduite et la mise en page est plus agréable à l’œil.
Je connais deux façons de le faire:
Beaucoup n’utilisent pas cette deuxième méthode, car beaucoup pensent et disent que Bootstrap ne gère pas bien l’affichage des cartes (cards) sur les mobiles en affichant une carte par ligne et qu’il est impossible de gérer l’affichage des cartes pour chaque périphérique.
Dans ce tutoriel, nous verrons comment résoudre ce problème et comment définir le nombre de cartes à afficher sur chaque ligne.
Pour commencer, j’ai préparé une page web nommée mysplash, sur laquelle j’ai créer mon masonry design(le doigt dans le nez…) juste en créant une div qui a pour nom de classe: “card-columns” dans laquelle j’ai placé toutes mes cartes.
Si je lance ma page sur mon téléphone, vous verrez qu’au lieu de 3 comme sur l’image au dessus, la page n’affiche qu’une carte par ligne.
Pour y remédier, je vais simplement créer des media queries qui me permettront d’ajuster et de gérer correctement le nombre de cartes que je souhaite afficher sur chaque écran.
Je précise que j’ai déjà un fichier CSS nommé mysplash.css dans lequel j’ai ajouté les medias queries, si vous n’en avez pas, vous devriez en créer un.
Une fois les medias queries créées, je vais mettre 2 comme valeur à la propriété “column-count” présente sur le media querie (min-width: 360px), ce qui me permettra d’afficher deux cartes par ligne sur les téléphones.
Voici le code:
J’ai aussi changé la valeur de ”column-count” pour afficher 4 cartes au lieu de 3 sur les ordinateurs à écran large.
Aujourd’hui Bootstrap permet de créer facilement des supers masonry design, il permet aussi de bien gérer l’affichage des cartes sur tous les périphériques disponibles.
Si cet article vous a plu et vous a été utile, n’hésitez à laisser vos claps et vos commentaires… Matondo mingi !!!