Les grilles sont fondamentales pour la conception des mises en page. Au cours de la durée de vie relativement courte du Web, les développeurs ont essayé toutes sortes de méthodes et de hacks pour disposer du contenu dans le navigateur. Ils ont  commencé avec une façon forfaitaire de faire la mise en page en attendant les réactions et les feedbacks des utilisateurs pour avoir l’idée claire de ce qu’ils peuvent faire de mieux , ce qui a engendré les mises en page basées sur les tableaux, suivies des mises en page basées sur flottants. Mais ces approches étaient, au mieux, des solutions de contournement, car ni les tables ni les flotteurs n’étaient censés être utilisés comme véritables outils de mise en page.

Naissance du  CSS Grid.

Le Grid Layout Working Draft a été publié en avril 2011. Trois des quatre auteurs provenaient de Microsoft et le premier aperçu de la plate-forme IE10 livré avec une implémentation de grille préfixée. Au cours de 6 ans, la spécification a évolué en fonction des commentaires des développeurs et des fournisseurs de navigateurs travaillant ensemble pour proposer une solution de grille CSS native vraiment efficace.

Spécifications Particulières

CSS Grid présente une série de propriétés qui nous permettent de créer des structures de grille et de contrôler le placement et le dimensionnement des éléments de grille à l’aide de CSS. Cela signifie que nous sommes en mesure d’utiliser des requêtes multimédias pour adapter nos grilles à différents contextes. Nous pouvons réorganiser la disposition des éléments de la grille indépendamment de leur ordre source, ce qui nous permet de déplacer les éléments de la grille pour répondre à ces différents contextes sans devoir modifier le balisage sous-jacent.

Grid est également livré avec un puissant algorithme de placement automatique, ce qui rend plus facile de compléter l’espace disponible sans avoir à faire beaucoup de calculs compliqués. Dans une certaine mesure, Grid permet même une certaine flexibilité sur l’axe z, en ce sens que vous pouvez chevaucher les éléments de la grille si vous le souhaitez.

Ça vaut la peine!

Parce que Grid a été créée pour être très flexible et fournir des solutions pour de nombreux cas d’utilisation différents, ce n’est pas quelque chose que nous pouvons simplement récupérer et utiliser en une journée. L’apprentissage prendra certainement du temps, mais une fois que vous vous familiarisez avec, vous pourrez passer plus de temps à concevoir des mises en page au lieu de  souffrir la détresse des codes pour produire la mise en page souhaitée.

CSS Grid Layout est le système de mise en page le plus puissant disponible dans CSS. C’est un système bidimensionnel, ce qui signifie qu’il peut gérer les deux colonnes et  lignes, contrairement à Flexbox qui est en grande partie un système à 1 dimension. Vous travaillez avec Grid Layout en appliquant les règles CSS à la fois à un élément parent (qui devient le conteneur Grille) et à ces éléments enfants (qui deviennent des éléments Grille). Sa mission est de révolutionner la façon dont les  interfaces utilisateurs sont conçues.

W3C (Le World Wide Web Consortium, une communauté internationale où les organisations membres, un personnel à plein temps et le public travaillent ensemble pour élaborer les normes Web), a décrit le CSS Grid comme étant un module  qui définit un système de mise en page bi-dimensionnel basé sur la grille, optimisé pour améliorer la conception de l’interface utilisateur.

CSS Grid est facile à manipuler. Il suffit de définir un élément container comme une grille, via la propriété display:grid, de régler les dimensions des colonnes et des rangées avec grid-template-columns et grid-template-rows et de placer ses éléments enfants dans la grille avec grid-column et grid-row. Comme pour Flexbox, l’ordre des items de la grille tel qu’il apparaît dans la source n’a pas d’importance. Votre CSS peut les placer dans n’importe quel ordre, ce qui facilite la réorganisation de votre grille avec les media queries. Vous pouvez ainsi définir le layout de votre page et le réorganiser entièrement pour l’adapter à différentes tailles d’écrans, et tout cela avec juste quelques lignes de CSS. Grid est un des modules CSS les plus puissants jamais proposés.