Sous-grille CSS

Publié le 28 septembre 2023

La grille CSS est un moteur de mise en page très puissant, mais les canaux de ligne et de colonne créés sur une grille parente ne peuvent être utilisés que pour positionner les enfants directs du conteneur de grille. Toutes les zones et lignes de grille nommées définies par l'auteur étaient perdues sur tout autre élément qu'un enfant direct. Avec subgrid, la taille, les modèles et les noms des pistes peuvent être partagés avec des grilles imbriquées. Cet article explique son fonctionnement.

Avant la sous-grille, le contenu était souvent adapté manuellement pour éviter les mises en page désordonnées comme celle-ci.

Trois cartes sont affichées côte à côte, chacune avec trois éléments de contenu : en-tête, paragraphe et lien. La longueur du texte de chacune d'elles est différente, ce qui crée des alignements incohérents dans les fiches lorsqu'elles se trouvent côte à côte.

Après la sous-grille After, vous pouvez aligner le contenu de taille variable.

Trois cartes sont affichées côte à côte, chacune avec trois éléments de contenu : en-tête, paragraphe et lien. Chacune a une longueur de texte différente, mais la sous-grille a corrigé les alignements en permettant au plus grand de chaque élément de contenu de définir la hauteur de la ligne, ce qui corrige les problèmes d'alignement.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

Principes de base des sous-grilles

Voici un cas d'utilisation simple qui présente les principes de base du CSS subgrid. Une grille est définie avec deux colonnes nommées, la première ayant une largeur de 20ch et la seconde correspondant au "reste" de l'espace 1fr. Les noms de colonnes ne sont pas obligatoires, mais ils sont très utiles à des fins d'illustration et d'éducation.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Ensuite, un enfant de cette grille, qui s'étend sur ces deux colonnes, est défini comme un conteneur de grille et adopte les colonnes de son parent en définissant grid-template-columns sur subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
Capture d'écran des outils de développement de la grille CSS, montrant deux colonnes côte à côte avec un nom au début de leur ligne de colonne.
https://codepen.io/web-dot-dev/pen/NWezjXv

C'est tout. Les colonnes d'une grille parente ont été transmises à un niveau inférieur à une sous-grille. Cette sous-grille peut désormais attribuer des enfants à l'une ou l'autre de ces colonnes.

Défi ! Répétez la même démonstration pour grid-template-rows.

Partager une grille "macro" au niveau de la page

Les concepteurs travaillent souvent avec des grilles partagées, en dessinant des lignes sur l'ensemble d'une conception et en alignant tous les éléments souhaités. Les développeurs Web peuvent désormais aussi le faire ! Ce workflow exact peut désormais être réalisé, et bien d'autres.

De la grille macro à la conception finale. Les zones nommées de la grille sont créées au préalable et les composants sont ensuite placés comme vous le souhaitez.

Implémenter le workflow de grille de conception le plus courant peut fournir d'excellents insights sur les fonctionnalités, les workflows et les potentiels de subgrid.

Voici une capture d'écran prise dans Chrome DevTools d'une grille de macro de mise en page de page mobile. Les lignes ont un nom et des zones claires pour le placement des composants.

Capture d'écran des outils pour les développeurs de la grille CSS Chrome montrant une mise en page de grille de taille mobile où les lignes et les colonnes sont nommées pour une identification rapide: fullbleed, system-status, primary-nav, primary-header, main, footer et system-gestures.

Le CSS suivant crée cette grille, avec des lignes et des colonnes nommées pour la mise en page de l'appareil. Chaque ligne et chaque colonne ont une taille.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Certains styles supplémentaires donnent la conception suivante.

Même superposition de grille CSS DevTools qu'auparavant, mais cette fois avec une partie de l'UI du système mobile, des ombres et un peu de couleur. Aide à voir où la conception va.

Ce parent contient plusieurs éléments imbriqués. La conception nécessite une image pleine largeur sous les lignes de navigation et d'en-tête. Les noms de ligne de colonne les plus à gauche et à droite sont fullbleed-start et fullbleed-end. Nommer les lignes de grille de cette manière permet aux enfants de s'aligner simultanément avec la méthode abrégée de placement de fullbleed. C'est très pratique, comme vous allez le voir.

Capture d'écran agrandie de la superposition de la grille dans DevTools, avec un zoom sur les noms des colonnes "fullbleed-start" et "fullbleed-end".

Une fois la mise en page globale de l'appareil créée avec des lignes et des colonnes bien nommées, utilisez subgrid pour transmettre les lignes et les colonnes bien nommées à des mises en page de grille imbriquées. C'est le moment magique subgrid. La mise en page de l'appareil transmet les lignes et les colonnes nommées au conteneur de l'application, qui les transmet ensuite à chacun de ses enfants.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

La sous-grille CSS est une valeur utilisée à la place d'une liste de canaux de grille. Les lignes et les colonnes que l'élément s'étend à partir de son parent sont désormais les mêmes lignes et colonnes qu'il propose. Les noms de ligne de la grille .device sont ainsi disponibles pour les enfants de .app, et non seulement pour .app. Les éléments situés dans .app ne pouvaient pas faire référence aux canaux de grille créés par .device avant la sous-grille.

Une fois tout cela défini, l'image imbriquée peut désormais s'étendre sur toute la largeur de la mise en page grâce à subgrid. Aucune valeur négative ni astuce, mais une belle ligne qui indique "ma mise en page s'étend de fullbleed-start à fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}
Mise en page de la macro terminée, avec une image imbriquée pleine largeur située sous les lignes de navigation et d'en-tête principales, et s'étendant sur chacune des lignes de colonne nommées en plein écran.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Vous avez donc là une grille macro comme celle que les concepteurs utilisent, implémentée en CSS. Ce concept peut évoluer et croître avec vous si nécessaire.

Vérifier si votre appareil est compatible

L'amélioration progressive avec CSS et sous-grille est familière et simple. Utilisez @supports et, entre parenthèses, demandez au navigateur s'il comprend la sous-grille comme valeur pour les colonnes ou les lignes du modèle. L'exemple suivant vérifie si la propriété grid-template-columns est compatible avec le mot clé subgrid. Si c'est le cas, cela signifie que la sous-grille peut être utilisée.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Outils de développement

Chrome, Edge, Firefox et Safari disposent tous d'excellents outils de développement pour la grille CSS. Chrome, Edge et Firefox disposent d'outils spécifiques pour vous aider avec les sous-grilles. Chrome a annoncé ses outils en 115, tandis que Firefox les propose depuis un an ou plus.

Aperçu de la capture d'écran du badge de sous-grille trouvé sur les éléments du panneau "Éléments".

Le badge de sous-grille fonctionne comme le badge de grille, mais permet de distinguer visuellement les grilles qui sont des sous-grilles et celles qui ne le sont pas.

Ressources

Cette liste est une compilation d'articles, de démonstrations et d'inspirations générales pour vous aider à vous lancer. Si vous souhaitez aller plus loin dans votre apprentissage des sous-grilles, explorez toutes ces ressources de qualité.