CSS Grid Layout

By Rachel Andrew

Introduction

Cela fait maintenant des années que Rachel Andrew, experte en web, met tout en oeuvre pour promouvoir l’utilisation des grilles CSS dans la conception des sites web. Que sont ces grilles et qu’offre-t-elle de plus par rapport à d’anciens systèmes? Qu’en est-il de l’utilisation des frameworks? Les réponses à ces questions seront développés au travers ce résumé de la conférence “CSS Grid Layout”.

Rachel Andrew

Directrice général et fondatrice de la société de développement web edgeofmyseat.com, Rachel Andrew s’est spécialisé dans le développement front et back-end. Experte en CSS, elle s’est longtemps investie dans le domaine en tant que membre du “Web Standards Project”. Désormais, elle donne bon nombre de conférences à travers le monde sur l’utilisation des bonnes pratiques du CSS. Egalement auteur, nous pouvons retrouver son travail et ses recherches à travers plusieurs livres et/ou articles en ligne.

CSS Grid

Qu’est-ce que c’est?

Le module CSS Grid layout (modèle de disposition en grille) est un module spécifique à CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables en définissant des relations de taille, position et d'empilement entre les éléments HTML. Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. On peut ainsi créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Les éléments enfants d'un conteneur en grille peuvent donc désormais être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.

Qu’est-ce que ça apporte de nouveau?

Le module CSS Grid layout permet de nommer les différentes zones d’une page. Il est donc facile de redéfinir l’ordre du contenu d’une page sur deux dimensions. Cela nous permet aussi de prévoir l’affichage sur différents écrans et donc de travailler plus facilement les versions responsive d’un site.

Comparaison avec flexbox

Flexbox est conçu fondamentalement pour disposer des objets dans une dimension unique (sur une rangée OU une colonne), alors que Grid est conçu pour disposer des items dans deux dimensions (rangées ET colonnes). C’est ici leur principale différence. Grid est donc parfait pour construire des frameworks et des grilles, l’architecture globale de la page, puisque les cellules du tableau sont flexibles, donc le contenu s’adapte. Tandis que Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits: navigations, sliders, fiches produits, etc. En effet, les cellules sur ce dernier sont fixes, nous devons donc penser le contenu en fonction de la taille de celle-ci afin d’éviter tout problème d’affichage.

Framework

Qu’est-ce que c’est?

Un framework est un ensemble d'outils utilisés par les développeurs, dont l'ensemble forme un “squelette” de pages web qui vise à booster la productivité du développeur qui va l'utiliser. Le contenu exact du framework est dicté par le type de site web et l'architecture cible pour lequel il est conçu.

L’opinion de Rachel Andrew

Elle n’est pas une “Framework hater”, elle explique que les frameworks sont des outils qui nous ont bien souvent aidés et dont l’aspect pratique n’est plus à démontrer. Nous sommes en effet bien souvent amené à faire des choses rapidement pour le client. Rachel confie d’ailleurs qu’elle en utilise souvent dans ses propres travaux.

Conclusion

Le module CSS Grid layout ne fait pas encore l'unanimité chez les développeurs. En effet, même si le module est disponible sur tous les navigateurs depuis mars 2017, la plupart des développeurs n’osent pas encore s’y frotter, même si son utilisation est pourtant beaucoup plus simple que flexbox. Les mises à jour n’étant pas forcément installées sur toutes les machines des utilisateurs, l’affichage ne peut donc pas être assuré partout. Néanmoins, Rachel encourage largement son utilisation, en effet, c’est en l’intégrant de plus en plus que le module deviendra une norme incontournable. il ne faut cependant pas oublier que chacune de ces solutions est utile et doit être pouvoir être utilisé, il faut juste les appliquer aux bons moments.