Utiliser le module CSS Grid Layout

1. La mise en page en grille

Le module CSS Grid Layout va nous permettre de créer de « véritables » mises en page avancées à l’aide de grilles parfaitement efficaces et responsives. Ce module est toujours en travaux au sein du W3C, puisqu’il est en Candidate Recommendation, au 14 décembre 2017, en juillet 2020 (https://www.w3.org/TR/css-grid-1/), à la rédaction de cet ouvrage.

Même s’il n’est pas encore entièrement finalisé, ce module est parfaitement reconnu par tous les navigateurs modernes, comme l’atteste le site de référence Can I Use.

Nous pouvons donc l’utiliser sans aucune restriction dans le développement de nos sites web.

2. Connaître le vocabulaire des grilles

Nous allons commencer par définir les différents termes utilisés dans la conception des mises en page en grille avec le module CSS Grid. Les deux premiers éléments que nous allons définir, le conteneur de grille et ses enfants, sont directement liés à des éléments HTML.

Comme pour les mises en page flexibles, il nous faut un conteneur parent pour définir la grille. C’est le Grid Container en anglais, le conteneur de grille en français. Pour qu’un élément HTML devienne un conteneur de grille, il suffit que la propriété display: grid lui soit appliquée. Dans une même page web, nous pouvons ...