grid layout, vers la grille parfaite

J’ai publié, il y a un peu plus d’un an maintenant, un article nommé « le point sur les grilles en CSS », dans lequel je comparais les différentes techniques permettant de réaliser une grille de mise en forme via les positionnements CSS existants.

La conclusion de cet article était qu’aucun mode de positionnement, même parmi les plus avancés tels que multi-columns, Flexbox ou Grid Layout ne remplissait toutes les conditions de la grille parfaite.

Mais ça, c’était avant que les spécifications de Grid Layout n’évoluent et n’apportent ce qu’il manquait.

Parmi les récents ajouts de Grid Layout, je vous laisse apprécier :

  • la valeur-fonction repeat() permettant d’initialiser une grille répétitive très facilement
  • la répartition automatique des éléments dans la grille (autoflow) sans avoir à les placer individuellement
  • la gestion de gouttières via grid-gap (raccourci de grid-column-gap et grid-row-gap.

The grid

Grâce à ces nouveautés, il est devenu extrêmement simple de construire une grille de 4 colonnes séparées d’une gouttière de 1rem par exemple :

.container {
  display: grid; /* grid container */
  grid-template-columns: repeat(4, 1fr); /* 4 cols repeated, equal width */
  grid-gap: 1rem; /* vertical and horizontal gutter */
}

Éléments double ou triple taille ?

Toujours aussi facilement, il est possible d’indiquer à certains éléments qu’il doivent occuper plusieurs colonnes ou plusieurs lignes :

@media (min-width: 481px) {
  .col-span {
    grid-column: span 2; /* will be double sized horizontally */
  }
  .row-span {
    grid-row: span 2; /* will be double sized vertically */
  }
}

Preums ?

Indiquer à un élément qu’il doit s’afficher avant les autres est tout aussi enfantin :

.first {
  order: -1; /* will be first item */
}

 

Responsive ? Facile !

Un petit coup de Media Queries pour changer la grille suffit pour tout remanier lorsque les tailles d’écrans changent.

Voyez vous-même :

/* Responsive small */
@media (max-width: 640px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Responsive tiny */
@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Et hop !

Version écrans larges (4 colonnes) :

grid

Version écrans réduits (2 colonnes) :

grid2

Version écrans petits (1 colonne) :

grid3

Voir l’exemple en ligne
(activez vos flags navigateur si nécessaire)

C’est pour quand ?

La grille parfaite en CSS existe enfin, Bootstrap n’a qu’à bien se tenir, moi je vous le dis !

Il y a juste encore un tout petit souci, celui de la compatibilité. En effet, il n’y a actuellement qu’un seul navigateur qui reconnaisse Grid Layout nativement, c’est …Internet Explorer (10+) / Edge.

EDIT 11 mars 2016 : Hourra ! Grid Layout vient de débarquer sur  Chrome 50 et sur Firefox 46.

Ceci dit, la specification est en pleine implémentation du côté des autres navigateurs / moteurs : Chrome, Opera, Firefox le testent via un flag; sur Safari c’est également en cours de développement.

Bref, l’attente ne sera pas si longue que ça. Le retardataire sera cette fois Safari, qui nous forcera sans doute à attendre que iOS10 soit pleinement démocratisé.

Et sinon, si le coeur vous en dit, il existe un polyfill Grid Layout qui semble prometteur.

Maxibonus : les variables CSS pour oublier définitivement Bootstrap !

Les variables CSS (ou de leur vrai nom « custom properties ») vont élargir les horizons de ce type de grilles, les simplifier et nous permettre de nous débarrasser définitivement des frameworks usines à gaz.

Je vous invite vivement à consulter l’article de Thomas Zilliox « les variables CSS sont nos amies » pour découvrir les possibilités offertes par cette spécification malheureusement encore trop peu supportée par les navigateurs (Firefox, Chrome et Safari à ce jour).

Nous pourrions automatiser notre code précédent de la formidable manière suivante :

[class*="grid-"] {
  --grid-number: 4;
  --grid-gutter: 1rem;
  display: grid;
  grid-template-columns: repeat(var(--grid-number), 1fr);
  grid-gap: var(--grid-gutter);
}

Bon, jusque là rien de très sexy encore  mais imaginez à présent pouvoir créer vos propres grilles aux valeurs personnalisées, rien qu’en donnant un nom de classe à votre conteneur.

[class*="grid-3"] {
  --grid-number: 3;
}
[class*="grid-2"] {
  --grid-number: 2;
}
...
[class*="-gutter-2"] {
  --grid-gutter: 2rem;
}
[class*="no-gutter"] {
  --grid-gutter: 0;
}
...

Concrètement voici comment on pourrait employer ces variables :

  • un conteneur de classe .grid-2 crée une grille de 2 colonnes, de gouttière 1rem,
  • un conteneur de classe .grid-2-no-gutter crée une grille de 2 colonnes, sans gouttière,
  • un conteneur de classe .grid-gutter-2 crée une grille de 4 colonnes, de gouttière 2rem,

etc.

Voir une démo en ligne

L’avenir des grilles est en marche !

17 réflexions au sujet de « grid layout, vers la grille parfaite »

    1. J’imagine que la spec suit (ou suivra) celle de Flexbox. Actuellement elle dit que seul l’ordre du DOM compte (et donc que Firefox a tort de s’adapter aux modifs visuelles).

  1. Merci pour cet article Raphaël.

    Concernant les variables CSS, elles sont fonctionnelles (par défaut) à partir de Chrome 49 \o/

  2. Génial, mais il est encore très prématuré d’utiliser « the grid layout » en prod tellement son support est mauvais.

    A force de m’armer de patience pour pouvoir utiliser toutes les nouveautés css qui s’offrent régulièrement à nous, je finis par oublier ce que j’attends. 😱

    Sylvain

  3. Bonjour,
    je suis sur Firefox 47.0.1 (osx) et ça ne semble pas fonctionner.
    En grand une colonne, les lignes l’une au dessus de l’autre sans gouttière, la 9 en dernier, en moyen 2 colonnes, 9 en premier, en petit 1 colonne, 9 en premier. Et c’est pareil sur Chrome…
    Peut-être que quelque chose m’échappe.

      1. Je ne connaissais pas, j’ai cherché sur Google et je pense avoir activé le webgl, mais ça ne doit pas être ça parce que ça ne marche pas. Étant assez novice dans tout ça je me dis que peut-être je dois continuer à pratiquer avant de faire des trucs que mon navigateur trouve « dangereux »😉

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s