CSS Grid Layout est un système de mise en forme de pages web bidimensionnel puissant avec des lignes et des colonnes. Il vous aide à réaliser des mises en page très complexes. Avec cette technique vos mises en page seront ainsi plus solides, performantes à l’affichage et à la fois malléables.
Du global au détail
Avec le CSS Grid Layout, vous travaillez avec une méthode qui part de la globalité de la conception.
- Vous commencez d’abord par définir les zones de votre page (que vous avez préalablement posé sur papier ou avec un logiciel tel que Balsamiq ou Figma…) que vous reportez dans les sections principales de votre page HTML. Vous utilisez des balises sémantiques HTML5 <main>,<header>, <nav>, <section>,<article>,<aside>, <footer, <dialog>.
- Vous veillez à donner un nom à vos différentes sections structurantes avec des identifiants et des classes qui font sens dans votre page.
- Ensuite dans votre feuille de style CSS vous renseignez un conteneur auquel vous appliquez une disposition en grille (display: grid). Vous choisissez le nombre de colonnes à donner au conteneur avec la propriété grid-template-columns.
- Après cela, vous renseignez les règles des différentes sections (par leur balises, leurs classes, leurs identifiants) en précisant celles qui doivent se comporter en zones d’aires (grid-areas).
- Une fois cette opération réalisée, vous répartissez ces zones d’aire dans le conteneur parent (celui de l’étape 3) en lui appliquant la propriété (grid-template-areas).
Vous n’aurez plus qu’à déplacer ces zones facilement comme dans un jeu de taquin ou les placer dans un autre conteneur (qui servira de bloc de grille).
Ce n’est qu’ensuite que vous appliquez un positionnement aux éléments de détail : soit avec des boîtes flottantes ou bien des boîtes flexibles de positionnement (Flexbox).
La plupart des manuels qui ont suivi le chemin de l’arrivée des nouvelles spécifications des CSS par ordre chronologique abordent Flexbox puis Grid CSS.
Cet apprentissage est logique mais peut poser des contraintes dans l’avancée du parcours de l’apprenant. Si vous voulez commencer à mettre en page vos éléments, avec Flexbox, vous allez très certainement vous retrouver devant les mêmes problématiques que lorsque vous utilisez des boîtes flottantes.
Après avoir maîtrisé Flexbox, vous pouvez éprouver la sensation de ne pas savoir correctement mettre en page sans utiliser de rustines. Pour cause, Flexbox est prévu pour positionner des éléments non pas pour la mise en page.
Un discernement à opérer
Quelques formateurs font le choix de vous initier d’abord au GRID CSS Layout avant d’aborder les Flexbox.
Car en effet, sans utiliser un framework tel que Bootstrap (système de grille qui intègre Flexbox) , Bulma.io etc.. ou Grid CSS, vos mises en page risquent d’être plus difficiles à maintenir.
Vous êtes ici confrontés au même même choix à opérer que lorsque vous réfléchissez à votre méthode d’intégration pour différents appareils : « dois-je réfléchir mobile first (d’abord pour le mobile) ou pas ? » De toute évidence la réponse est oui !
Dans ce cas vous abordez votre conception et intégration de la mise en page graduellement d’abord en partant du mobile en allant jusqu’au desktop (ordi).
De la même façon, posez-vous cette question : «dois-je aborder la mise en page en appliquant une grille de mise en page, en positionnant les zones de page pour placer ensuite mes éléments ?», où devrais-je placer les éléments en essayant ensuite de les adapter aux zones de la page ?
CSS Grid Layout et Flexbox pour une intégration moderne
Un bon Designer Web doit aujourd’hui connaître à la fois Grid CSS Layout et Flexbox qui sont complémentaires.
Vous pouvez bien réaliser une mise en page uniquement avec de simples boîtes flottantes, ou Flexbox, néanmoins vous serez plus à l’aise face à des situations difficiles en appliquant directement CSS Grid Layout.
Pour des projets de page Web sans mise en page complexe, vous n’aurez peut-être pas besoin de Grid CSS Layout.
De mon point de vue, il serait bon pour vous de les adopter dès le début de votre intégration, cela vous facilitera l’évolution de vos sites et leur maintenabilité.
