.amonoma ← → index.
écran d'ordinateur avec du code informatique

Article de Cedric A.

Une remarque, un commentaire, un sujet que vous aimeriez voir traité ?
écrivez nous !


Pourquoi faut-il promouvoir et utiliser Grid layout ?

Publié le 15/12/2017
/langages-du-web

Grid Layout, plus connu sous le nom de Grid, est une nouvelle instruction du CSS permettant une mise en forme à la fois plus simple et plus puissante. Si vous ne savez pas ce que c’est ou si vous voulez une description plus détaillée de comment l’utiliser, je vous conseille la lecture de cet excellent guide (mais c’est en anglais !) : A complete guide to Grid

C’est quoi ce truc ? tu veux pas nous faire un résumé ?

Bon d’accord : grossièrement Grid est une façon de créer la mise en page de son site en générant une grille virtuelle sur laquelle on va placer les éléments selon notre bon vouloir, de façon presque totalement visuelle.

C’est une blague ?

Mais non voyons, c’est très sérieux, fort pratique et ça représente au moins autant une révolution dans la façon de concevoir le Css des sites qu’a pu l’être Flexbox en son temps (c’est à dire il n’y a pas très longtemps quand même). Il est à noter que Grid et Flexbox se marient très bien et sont tout à fait complémentaires comme on peut le voir très bien expliqué ici : grid & flexbox, duo gagnant

Tu t’égares, revient au sujet !

Oui, pardon. Donc Grid se présente ainsi : un contenant (que nous appellerons élément parent) et des contenus (que nous appellerons éléments enfants). Le contenant est affublé, dans sa définition Css, de la propriété

    display: grid;

(il existe des variantes mais le fonctionnement est le même). Il devient alors le parent Grid et ses éléments enfants seront affectés par Grid. Ce contenant se voit affublé alors de la grille virtuelle tel qu’on la décide. Pour faire simple il suffit de lui signifier :

    grid-template-columns: 1fr 1fr 1fr;

pour qu’il génère automatique en son sein trois colonnes virtuelles représentant chacune une fraction (le “fr”) de l’ensemble. Donc un tiers de lui-même, à la virgule près. On peut bien entendu utiliser également des pourcentages, des unités tels que les pixels ou un joyeux mélange de tout ça. Et ça fonctionne de la même façon pour les lignes (avec “grid-template-rows”).

On voit déjà ici toutes les possibilités qui nous sont offertes, et ce n’est qu’une toute petite partie de ce que peut faire Grid.

Il s’agit maintenant de distribuer les éléments enfants (les contenus) au sein de cette grille qui n’est encore pour le moment que virtuelle. Et c’est là que ça devient très très fort.

Je demande à voir…

Et bien voilà : on va attribuer à chaque élément enfant un nom au sein de css. Imaginons que notre parent contienne 3 enfants identifiés comme #riri, #fifi et #loulou (ou n’importe quoi d’autre, riri, header, colchique… à vous de voir mais soyez cohérent dans vos nommages histoire de pouvoir vous y retrouver par la suite). Et on utilise la propriété “grid-area”

    #riri {
        grid-area: gauche;
    }
    #fifi {
        grid-area: milieu;
    }
    #loulou {
        grid-area: droite;
    }

Et c’est tout ? 

Presque. Il ne reste plus qu’à affubler notre contenant (l’élément parent donc) de la propriété suivant : “grid-template-areas: “ et de lui écrire textuellement la position des éléments sans oublier de les entourer de doubles-guillemets. Comme ça :

    .contenant {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas: "gauche milieu droite";
    }

Et hop magie : nos 3 éléments enfants riri, fifi et loulou se disposeront parfaitement à gauche, au milieu et à droite dans notre élément parent. Encore plus fort : si on écrit “milieu gauche droite” on aura dans l’ordre fifi, riri et loulou… Et ça fonctionne sur plusieurs lignes également.

Bon d’accord mais pourquoi faut-il le promouvoir ?

Tout simplement parce que c’est une technologie non seulement fabuleuse pour les développeurs web (imaginez le temps qu’on gagne) mais également pour l’utilisateur. Elle facilite le placement des éléments, donc moins de lignes de code, donc des fichiers plus léger, donc des pages qui s’affichent plus rapidement. De plus on est sur que quelque soit le navigateur ou le device que vous utilisez, le rendu sera tel qu’on l’aura prévu et il n’y aura donc plus ces bugs irritants qui peuvent encore nous gâcher certaines visites de sites.

Il faut le promouvoir car il est évidement déjà supporté par la plupart des gros navigateurs modernes  (Chrome, Firefox, Edge, Safari) mais qu’il est encore peu représenté sur les navigateurs fournis par défaut sur certains smartphones android par exemple.

Et surtout, surtout il faut le promouvoir car il figure la mise en page de demain, simple, fonctionnelle et facile à maintenir ou à modifier. Adoptez et faites connaitre Grid, vos enfants vous remercieront (Mais quel est le rapport ?) !

Pour aller encore plus loin avec Grid

La cascade

Grid by example

Cedric A.