Sous-grille CSS

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 un élément autre 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 personnalisé pour éviter les mises en page irrégulières 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 l'une à côté de l'autre.

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 d'elles a une longueur de texte différente, mais la sous-grille a fixé les alignements en permettant au plus grand de chaque élément de contenu de définir la hauteur de ligne, ce qui résout les problèmes d'alignement.

Navigateurs pris en charge

  • 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'enseignement.

.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 pour la grille CSS, montrant deux colonnes côte à côte, avec un nom au début de la ligne de la colonne correspondante.
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 affecter 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 traçant des lignes sur une conception entière et en alignant tous les éléments de leur choix. Les développeurs Web peuvent désormais aussi le faire ! Ce workflow peut désormais être réalisé avec précision, et bien d'autres encore.

De la grille macro à la conception finale. Les zones nommées au niveau de la grille sont créées à l'avance, puis les composants ultérieurs sont 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 code 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 colonne a 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.

Superposition de grille des outils pour les développeurs CSS identique à celle utilisée précédemment, mais cette fois avec une partie de l'UI du système mobile, des ombres et un peu de couleur. Cela aide à voir où va la conception.

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 zoomée de la superposition de grille des outils de développement, portant spécifiquement sur les noms des colonnes de début à fond perdu et de fin à fond perdu.

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 d'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 pistes sous la forme d'une grille. Les lignes et colonnes réparties entre l'élément et son parent sont désormais les mêmes lignes et colonnes que celles 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.

Maintenant que tout est défini, l'image imbriquée peut s'afficher en fond perdu dans la mise en page grâce à subgrid. Pas de valeurs négatives ni d'astuces à la place, plutôt une jolie phrase en une ligne indiquant "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 évoluer avec vous si nécessaire.

Vérifier si votre appareil est compatible

L'amélioration progressive avec CSS et une 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 pour les développeurs sur la grille CSS. Chrome, Edge et Firefox disposent d'outils spécifiques pour faciliter la création de sous-grilles. Chrome a annoncé la sortie de ses outils en 115, alors que Firefox les utilise depuis un an ou plus.

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

Le badge de sous-grille fonctionne comme le badge de grille, mais il distingue 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'idées générales qui vous aideront à vous lancer. Si vous cherchez la prochaine étape pour l'enseignement de votre sous-grille, amusez-vous à explorer toutes ces formidables ressources !