CSS Grid Layout - Présentation

Table Des Matières

CSS Grid Layout – Présentation

CSS Grid est le système révolutionnaire de mise en page bidimensionnel créé spécifiquement pour modifier et améliorer les les interfaces utilisateur basées sur la grille.

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.

Grille Thème Exemple

En Quoi Grid est-il diffèrent de Flexbox?

La principale différence entre Flexbox et Grid réside dans le fait que Flexbox est conçu principalement pour disposer des items dans une dimension unique — sur une rangée OU sur une colonne (soit sur une rangée, soit sur une colonne mais jamais sur les deux). Quant à Grid, il est conçu pour disposer des items dans les deux dimensions — sur les rangées ET sur les colonnes. 

CSS Grid et FlexBoxDepuis mars 2017 CSS Grid est supporté par Firefox, Chrome, Opera et Safari.

 CSS-Grid-Compatibilité

Comme vous pouvez constater à l’image ci-dessus, la majorité des navigateurs principaux et à jour sont prêts à fonctionner et peuvent supporter les propriétés CSS Grid.
Microsoft, avec Edge et IE n’offre qu’un support partiel via le préfixe -ms-.  Une mise à jour de l’implémentation CSS Grid est maintenant l’une des priorités de ses développeurs .

Bien que la majorité des navigateurs soient compatibles avecCSS Grid Layout, ce sont seulement leurs dernières versions / builds qui représentent environ 30 à 40% de l’utilisation globale du navigateur. Donc, à moins que vous sachiez que la grande majorité de vos utilisateurs utilisent des versions à jour de leurs navigateurs, Grid n’est pas prêt pour les sites traditionnels.

Ressources utiles et tutoriels

Une source inépuisable de tutoriels et messages d’introduction sont pupliés ces dernières semaines surtout après que CSS Grid soit supporté par Firefox, Chrome, Opera et Safari . Nous les avons examiné attentivement avant de partager  une poignée des meilleurs liens et ressources pour vous aider à commencer à pratiquer et à expérimenter le CSS Grid Layout. Certaines ressources sont en anglais mais ils sont faciles à comprendre vu que vous êtes supposés être famliers avec les termes techniques anglais. 

Les concepts de base des grilles CSS

Dans cet article  vous allez parcourir rapidement la spécification CSS Grid Layout. Qu’est ce qu’une grille ? le conteneur, les pistes, les lignes de grille, les cellules, les gouttières, les grilles imbriquées, comment Superposer les éléments avec z-index et Comment Contrôler l’ordre de superposition.

Grilles CSS

CSS Grid Garden

Grid Garden est un petit jeu de codage basé sur un navigateur amusant où vous écrivez un code CSS pour faire pousser votre jardin de carottes. C’est un moyen pratique idéal pour apprendre certaines des bases en s’amusant.Pratique des bases Grilles CSS en jouant

Grid by example

comprendre CSS Grid Layout.

Par Rachel Andrew, une foule d’exemples pour comprendre CSS Grid Layout. Ces exemples incluent l’image de l’exemple comme elle paraîtra dans le navigateur compatible. Ils relient chacun à une page avec plus d’informations sur la technique affichée, le code et un CodePen de l’exemple. Sauf indication contraire, ces exemples fonctionnent dans n’importe quel navigateur prenant en charge la spécification Grid à jour.

CSS Grid Cheat Sheet

CSS Gride Guide Visuel

Votre guide visuel  ultime, un bon terrain de jeu visuel pour s’attaquer à la terminologie, aux propriétés et à la façon dont la disposition de la grille fonctionne généralement dans le navigateur.

CSS Grid Inspector

CSS Grid Inspector

Nouveau dans Firefox 52. À partir de Firefox 52 DevTools, vous pouvez demander à l’inspecteur de superposer une représentation de la grille lors de l’inspection des mises en page de la grille.

Eh Bien Voilà, je souhaite que cet article vous facilite un peu l’initiation à ce système révolutionnaire. n’hésitez pas à me laisser un commentaire si vous voulez savoir quelque chose ou suggérez aussi quelque chose où me proposer un sujet que vous voulez que j’écris un article sur. Bref je suis là pour vous!

Le prochain article serait un guide complet et pratique avec les toutes dernières mise à jours de CSS Grid Layout. Soyez au rendez vous !

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here