Le CSS Grid Layout est une nouvelle spécification CSS, en cours d’implémentation, qui a le potentiel de révolutionner la mise en page CSS. Comme son nom l’indique, il s’agit d’un modèle de mise en page basé sur une grille à deux dimensions, sur laquelle viennent se placer des blocs de contenu.

Cette fonctionalité CSS a été proposée en 2011 par Microsoft, et implémentée à fins de test dans Internet Explorer 10 et 11. Le projet a été repris par le W3C, où son développement se poursuit.

En début 2017, le module CSS Grid Layout fait son entrée dans les navigateurs. Il est actif dans Firefox 52 (sorti le 7 mars 2017) et Chrome 57 (sorti le 9 mars 2017).

Il est donc désormais possible de l’utiliser. Une manière prudente de le faire est d’utiliser la méthode de chargement CSS optionnel @supports:


// Styles sans la grille

@supports ( display: grid ) {
  .foo { display: grid; }
  // Styles avec la grille
}

Exemples de grille

Ajouter une gouttière:

La propriété column-gap permet de définir l’espace entre les colonnes d’un élément.

column-gap: 2rem;

Voir: Documentation MDN

Ressources CSS Grid Module

En anglais: