CSS grid : le guide pour les maîtriser (+ exemples)

Le module CSS grid, ou CSS grid layout, crée plusieurs zones de contenu distinctes, et permet de déterminer avec précision leurs tailles et leurs emplacements respectifs. Le webdesigner peut alors coder le contenu de chaque zone indépendamment : chaque contenu reste cantonné à sa zone. CSS grid est en quelque sorte le pendant des templates proposés par les CMS, tels que les thèmes WordPress, pour générer automatiquement la disposition des contenus sur la page web. À moins d'utiliser un CMS, le module CSS grid est donc essentiel pour créer une mise en page lisible et attractive. Utiliser le langage CSS pour coder la disposition des contenus, en outre, permet de personnaliser la mise en page de manière avancée.

Pour comprendre le fonctionnement du module CSS grid layout, il faut imaginer une grille composée de colonnes et de lignes. Cette grille est le conteneur parent. Elle ne s'affiche pas à l'écran, elle joue le rôle de repère pour placer verticalement et horizontalement les zones de contenu. Chaque zone est un conteneur fils, positionné sur la grille en indiquant ses coordonnées, c'est-à-dire les colonnes et les lignes dont il occupe l'espace. Chaque conteneur fils affiche alors son contenu, constitué d'un élément ou d'un groupe d'éléments.

Ici, la grille crée six zones de contenu, disposées en trois colonnes et en quatre lignes sur tout l'espace d'affichage de la page. La première zone occupe l'espace des trois colonnes et de la première ligne, tandis que la sixième zone occupe l'espace de la troisième colonne et des deux dernières lignes.

See the Pen css-grid_exemple by HubSpot France (@HubSpot-France) on CodePen.

La première zone pourrait par exemple afficher une bannière d'en-tête, les deuxième et troisième zones pourraient afficher un titre, une image et un bouton pour rediriger respectivement vers les pages « produits » et « services », la sixième zone pourrait afficher un formulaire de contact.

Pourquoi utiliser CSS grid ?

Utiliser CSS grid layout permet de mettre en page le document HTML. Sans mise en page, le navigateur affiche les différents éléments à la suite les uns des autres en suivant l'ordre dans lequel ils sont renseignés dans le code HTML. Or cette succession de texte, d'images ou encore de formulaires, à défaut d'organisation, n'est pas harmonieuse. Avec CSS grid, le webdesigner organise le contenu de manière à faciliter la lisibilité et à améliorer le rendu visuel de la page web à l'affichage.

D'autres méthodes permettent de mettre en page le document HTML : les tableaux, les boîtes flexibles, le positionnement ou encore les éléments flottants. Ces méthodes toutefois présentent des limites, et c'est d'ailleurs pourquoi CSS grid layout a été créé. Utiliser ce module CSS dédié facilite la conception des mises en page complexes, étend les possibilités en matière d'UI design et offre l'avantage d'être pris en charge par la plupart des navigateurs, quel que soit l'appareil utilisé pour consulter le site web.

Utiliser CSS grid pour diviser tout ou partie de l'espace d'affichage de la page web sert les intérêts du webdesigner, dont le travail est facilité, et améliore l'expérience utilisateur en proposant une mise en page originale et robuste.

Comment utiliser CSS grid ?

Pour utiliser CSS grid layout, il faut :

• Un conteneur parent : l'élément HTML < div > prend la propriété CSS display: grid pour se comporter comme une grille.
• Des conteneurs fils : chaque élément < div > inclus dans le conteneur < div > parent constitue une zone de la grille, placée verticalement sur une ou plusieurs colonnes et horizontalement sur une ou plusieurs lignes.

Illustration :

See the Pen css-grid_colonne-ligne by HubSpot France (@HubSpot-France) on CodePen.

Des propriétés CSS grid layout enrichies permettent de personnaliser la mise en page. Exemples :

• La propriété grid-template-columns définit la taille des colonnes.
• La propriété background-color colore l'arrière-plan de la grille, ou l'arrière-plan d'une zone de la grille.
• La propriété color colore le contenu des zones de la grille.
• La propriété grid-gap détermine l'espace entre les zones de la grille.
• La propriété border ajoute une bordure à la grille ou à une zone de la grille.

Illustration :

See the Pen css-grid_proprietes by HubSpot France (@HubSpot-France) on CodePen.

Centrer une grille en CSS

Centrer une grille en CSS permet de positionner les zones de manières harmonieuse.

• La propriété align-items indique le positionnement des zones sur l'axe vertical de la grille. La valeur « center » permet de positionner les zones au centre de la grille en créant autant d'espace en haut et en bas à l'intérieur de la grille.
• La propriété justify-items indique le positionnement des zones sur l'axe horizontal de la grille. La valeur « center » permet de positionner les zones au centre de la grille en créant autant d'espace à gauche et à droite à l'intérieur de la grille.

Exemple de code CSS pour positionner les zones à l'intérieur de la grille :

See the Pen css-grid_centrer by HubSpot France (@HubSpot-France) on CodePen.

Créer une grille responsive

Créer une grille responsive consiste à adapter la mise en page à la taille de la fenêtre du navigateur, et à la taille de l'écran sur lequel le site web est consulté. Quels que soient le navigateur et l'appareil, CSS grid permet d'ajuster automatiquement l'affichage de la page web pour respecter l'UI design.

Plusieurs méthodes adaptatives existent. Voici un exemple de méthode pour concevoir une grille responsive avec CSS grid. Ici, il s'agit de créer des colonnes flexibles, dont le nombre s'adapte à la taille de l'écran, pour améliorer la lisibilité de la page sur mobile.

• Le code HTML contient la liste des quatre saisons, avec leur nom et leur descriptif. La liste est identifiée avec l'attribut class « saisons ».
• Le code CSS indique que la liste « saisons » doit se comporter comme une grille. La valeur de la propriété grid-template-columns indique que les quatre colonnes ont la même largeur, et que le nombre de colonnes s'adapte à la taille de l'écran.

Résultat :

See the Pen css-grid_responsive by HubSpot France (@HubSpot-France) on CodePen.

Exemples de CSS grid

Utiliser les propriétés « start » et « end »

Dans cet exemple de CSS grid, il s'agit de créer six zones de contenu identiques, disposées en trois colonnes et en deux lignes. Pour indiquer l'emplacement de chaque zone, le code CSS renseigne, pour chacune :

• À quelle colonne la zone commence, avec la propriété grid-column-start.
• À quelle colonne la zone s'arrête, avec la propriété grid-column-end.
• À quelle ligne la zone commence, avec la propriété grid-row-start.
• À quelle ligne la zone s'arrête, avec la propriété grid-row-end.

See the Pen css-grid_start-end by HubSpot France (@HubSpot-France) on CodePen.

Utiliser les propriétés raccourcies

Les propriétés raccourcies permettent de rédiger plus rapidement le code CSS, et améliorent sa lisibilité. Au lieu de renseigner le début et la fin de chaque ligne et de chaque colonne de la grille avec quatre propriétés distinctes, il suffit d'utiliser les propriétés raccourcies grid-column et grid-row, et de leur attribuer deux valeurs à chacune.

Ainsi, dans l'exemple précédent : « grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2 » devient « grid-column: 2 / 3; grid-row: 1 / 2 ». La disposition des zones ne change pas.

See the Pen css-grid_shorthand by HubSpot France (@HubSpot-France) on CodePen.

Utiliser la propriété grid-area

Cette propriété raccourcit encore le code CSS grid. Au lieu de mentionner les lignes et les colonnes, la propriété grid-area suffit à déterminer l'espace occupé par chaque zone. La propriété grid-area fonctionne avec quatre valeurs :

• La première correspond au début de la ligne.
• La deuxième correspond au début de la colonne.
• La troisième correspond à la fin de la ligne.
• La quatrième correspond à la fin de la colonne.

Exemple de CSS grid avec la propriété grid-area :

See the Pen css-grid_grid-area by HubSpot France (@HubSpot-France) on CodePen.

Personnaliser la disposition des zones

Dans les exemples précédents, chaque zone occupe une seule « case » de la grille. Pour personnaliser la disposition des zones, afin de créer une mise en page plus attractive, il faut ajuster les valeurs des propriétés grid-column et grid-row.

Dans l'exemple suivant, il faut imaginer une grille de quatre colonnes et quatre lignes. La première zone occupe la totalité de la première ligne, la deuxième zone et la troisième zone s'affichent en-dessous et occupent chacune la moitié de la ligne, la quatrième zone est centrée sur la troisième ligne, la cinquième zone occupe la première colonne et les deux dernières lignes.

See the Pen css-grid_disposition-personnalisee by HubSpot France (@HubSpot-France) on CodePen.

Exemple de mise en page avec CSS grid

L'objectif, dans cet exemple de CSS grid layout, est de créer une page web qui affiche ainsi un article de blog :

• Le titre de l'article en header.
• L'article de blog au centre de la page, aligné à gauche.
• Le sommaire de l'article au centre de la page, aligné à droite.
• Les liens vers les mentions légales et la page de contact en footer.

See the Pen css-grid_article-blog by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.