Grid CSS pour créer un layout responsive

19 février 2019 par Alexis

Récemment, un client nous a demandé de revoir une de nos anciennes réalisations dont le lancement datait de 2012. Il s’agissait dès lors de rendre le layout du site stable et responsive. L’occasion rêvée pour nous d’utiliser les techniques modernes de mise en page CSS et notamment Grid CSS !

Revisiter une de ses anciennes réalisations n’est pas toujours facile : avez-vous déjà rouvert un journal intime que vous écriviez à 13 ans ? C’est la même sensation. La syntaxe, la graphie, les sujets, les choix ont tellement changé en quelques années.

C’est l’occasion de faire une opération de nettoyage et d’amélioration assez salutaire. Je vais tâcher ci-dessous de retracer cette expérience récente et vous faire part du bonheur que nous avons eu à utiliser Grid CSS pour :

Recréer un layout sur base de l’existant
Le rendre responsive

Pour notre cas, la seule requête était de réaliser un site consultable et adapté sur tous supports. Nous n’aborderons pas ici le sujet de la performance du site ou de son référencement. Nous nous focaliserons sur le renouvellement d’une mise en page techniquement datée.

1. Réouverture du chantier

Le résultat recherché peut être résumé de la sorte, de façon abstraite :

Un Header en position sticky en colonne à gauche
Une distribution horizontale et spéciale du contenu dans le header selon la media query
Un contenu principal à droite

Website Grid Layout

S’impose un premier constat quand on remet les mains dans le code : les positions et la distribution des éléments dans la page étaient gérées par du jQuery. Consternant, mais que voulez-vous, c’était une autre époque.

Buzz and Woody contempling jQuery

De même, aucun usage n’est fait de valeurs de mesure liées à la fenêtre (vh, vw). Eh oui le langage CSS a pas mal évolué depuis…

Dans la structure html des pages, on découvre également pas mal d’incohérence et du « sur-wrapping ». Il est temps de nettoyer tout cela.

2. Construction de la grille

L’objectif premier est de reproduire la mise en page générale en simplifiant la structure HTML. Grid CSS s’impose tout de suite. Nous allons pouvoir laisser dériver le code basé sur jQuery et contrôler finement la mise en page avec du CSS. Partant de là, réorganiser le markup et y ajouter des media queries sera un jeu d’enfant.

Nous réalisons une structure générale comme suit :

See the Pen Re-design with Grid by Quentin (@quentincoeck) on CodePen.dark

Toute l’interface consiste en un header bloqué à droite (logo + navigation + infos) et une zone de contenu principal scrollable.

La mise en page est rapidement et simplement propulsée par quelques lignes :

.grid {
    display: grid;
    grid-template-columns: 180px auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 10px;
    width: 100%;
    min-height: 100vh;
    max-width: 1160px;
    margin: 0 auto;
}

grid-template-columns nous permet de créer 2 colonnes, la première fixée à 180px de large, la seconde occupera l’espace restant.

grid-column-gap et grid-row-gap gère les espaces entre les différentes zones.

En dessous de 560px, la grille est inversée, c’est-à-dire que grid-template-columns est none et qu’on organise la grille sur base des lignes : grid-template-rows.

Dans le header, j’ai choisi de garder l’affichage grâce à flex. Ça me permet de repousser le petit bloc avec les infos de contact au bout de cette zone, quelle que soit la hauteur du bloc de navigation. Ce header est aussi placé en position : sticky; c’est-à-dire qu’il restera bloqué dans la page même si l’utilisateur descend dans la page.

3. Grid CSS pour une galerie d’images

Dans la zone de contenu, composée d’une galerie d’images avec une grande image d’introduction, j’ai aussi utilisé display: grid ; . En très peu de lignes, très contrôlable avec les media queries, on met en place une liste d’onglets parfaite.

.home-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin: 10px 0px;
    list-style: none;
    padding: 0;
}

Dans ce cas, grid-template-columns nous permet de créer des colonnes, en en changeant le nombre selon la largeur du device utilisé.

Conclusion

Il est rafraîchissant de voir qu’en peu de lignes nous pouvons réaliser une mise en page qui représentait un challenge il y a encore quelques années. Le gain de temps et la robustesse de la solution Grid CSS en fait un outil essentiel pour répondre aux demandes de nos clients.

Il faut certes un peu de temps pour s’accoutumer à la syntaxe, car il s’agit de réfléchir sa mise en page en plusieurs dimensions, et ce de façon dynamique en prévoyant les breakpoints. Ajoutez à cela l’utilisation de flex, différents types de positionnement et vous pouvez vite y perdre de vue l’objectif final. Cet article propose une utilisation basique de Grid CSS, mais la variété des résultats que l’on peut en obtenir nous a une fois de plus étonnés.

Par-dessus tout, il est gratifiant de constater notre évolution dans les connaissances de l’outil CSS. Ça fonctionne très vite, c’est flexible, contrôlé, très propre…

Pour aller plus loin

Gardez toutefois à l’esprit les points suivants:

Faites attention à la compatibilité avec les navigateurs, les préfixes à utiliser… Grid est bien distribué, ce serait dommage de s’en passer, mais ne fonçons pas les yeux fermés.
La galerie fonctionne si toutes les images ont un ratio équivalent. Une version plus complexe de cette liste d’images demanderait un travail plus poussé sur la mise en page.
Vous aurez constaté l’absence de markup pour images adaptatives. Ce n’était pas le propos, mais veillez à corriger le tir si vous utilisez ces exemples.

Nous espérons que cet article sur l’utilisation de Grid CSS vous a inspiré ! En complément, voici quelques précieuses ressources qui nous ont accompagnés (et continuent de le faire) à travers le développement de ce projet:

À bientôt pour d’autres expériences !

Tous nos articles