CSS Grid Layout : Créer un “layout switcher”

Nous avons récemment vu les bases de la mise en page avec la spécification CSS Grid Layout à travers un exemple de construction de gabarit. Je vous propose d’aller un peu plus loin avec Grid et de réaliser une mise en page qui s’adapte en fonction du choix de l’utilisateur : Un “Layout Switcher”.

Au fait, c’est quoi un “Layout Switcher” ?

C’est tout simplement un mécanisme basé sur CSS et JS pour changer de mise en page en un clic. Vous avez certainement déjà croisé ce type de fonctionnalité sur des sites e-commerce par exemple. Le but est de permettre à l’utilisateur de choisir la mise en page qu’il lui convient le mieux afin de consulter un contenu. Généralement, ce type de fonctionnalité est proposé pour une liste d’articles ou de produits ou bien une galerie d’images.

Changement de mise en page sur fnac.com
Changement de mise en page sur dribbble.com

Qu’allons nous réaliser ?

Nous allons construire une liste d’articles qui s’adaptera selon 2 mises en pages : En colonnes et en liste. Le changement de mise en page s’effectuera au clic sur un bouton “Changer de vue” (intitulé très UX-friendly, n’est-ce pas ?).

Voici le résultat souhaité :

Rendu final souhaité

Etape 1 : Les éléments de base

Nous allons commencer par créer les éléments de base : Un conteneur pour notre layout, un bouton pour changer de mise en page et une liste d’articles. Nous allons partir du principe que la vue en colonnes (image de l’article en haut, contenu en bas) est la vue par défaut. Voici le code que nous écrivons :

Etape 1 : Création des éléments de base

L’élément-clé de notre mise en page est le conteneur :

<div class="layout col-view">

La classe .col-view nous servira pour identifier la vue en colonnes.

L’autre élément important est le bloc .articles-list qui va contenir nos articles :

<div class="articles-list">
<article class="article">
...
</article>
   <article class="article">
...
</article>
   ...
</div>

C’est ce bloc qui va nous permettre de gérer la future grille.

Etape 2 :Changement de mise en page

Nous allons baser notre mécanisme de “layout switcher” sur un simple changement de classe au niveau du bloc .layout. Le but est d’intervertir les classes .col-view et .list-view à chaque clic sur le bouton “Changer de vue”.

Voici le code mis à jour avec le JS (ES6) pour le changement de classe :

Etape 2 : Changement de layout au clic

Pour l’instant il ne se passe rien, du moins visuellement. Mais la mécanique est là, le bouton permet bien de changer de classe.

Passons aux styles.

Etape 3 :Création de la vue en colonnes

Commençons notre système de Grid pour la vue en colonnes. Nous souhaitons obtenir une mise en page où le nombre de colonnes augmente avec la largeur de la fenêtre.

Nous devons d’abord déclarer un Grid Layout avec des espacements de 20px entre chaque Grid Item. Le nombre de colonnes étant indéfini, nous allons utiliser une fonction repeat avec le mot-clé auto-fill pour la propriété grid-template-columns

Nous allons également définir une largeur minimum de 260px pour nos colonnes avec la fonction minmax pour permettre au navigateur d’ajuster automatiquement le nombre de colonnes dès qu’il en aura l’occasion.

Enfin, nous allons contextualiser ces styles spécifiques à la vue en colonnes grâce à la classe .col-view.

Etape 3: Mise en page en colonnes

Etape 4 : Création de la vue en liste

Travaillons maintenant sur la vue en liste, en ajoutant des styles spécifiques à la classe .list-view.

Etant donné que nous sommes sur une mise en page avec une colonne unique, nous n’avons rien à faire au niveau de .articles-list. Nous devons par contre faire évoluer le style des .article afin de les afficher comme souhaité (image et texte sur la même ligne).

Tout d’abord, nous devons transformer les .article en Grid de 2 colonnes (200px pour l’image et auto pour le contenu). Ensuite, nous allons définir des grid-area au niveau de .article-img et .article-content , pour les référencer dans grid-template-areas.

Comme vu dans la présentation de l’exercice, la disposition des éléments des articles doit alterner à chaque ligne (image - contenu / contenu - image / …). Pour cela, rien de compliqué : il suffit d’inverser les valeurs des propriétés grid-template-columns et grid-template-areas pour chaque élément pair avec le sélecteur :nth-child(even).

Enfin, il faut ajuster les styles de la vue en liste pour qu’ils ne s’affichent qu’à partir d’une certaine taille d’écran. Nous allons donc utiliser une media query pour englober le style de cette vue.

Conclusion

Nous avons réalisé une liste d’articles responsive qui s’adapte aussi bien à une mise en page en colonnes qu’en lignes. CSS Grid Layout montre une nouvelle fois toute sa puissance et sa flexibilité car nous avons réussi notre exercice avec à peine quelques lignes de CSS sans pour autant ajouter de code HTML ou JS superflu.

Grid, s’impose aujourd’hui comme une technique de mise en page incontournable. Si votre projet le permet, foncez !

Happy coding !

❤ Made with CSS & love.