Sous-grille CSS

La grille CSS est un moteur de mise en page très puissant, mais les pistes de lignes et de colonnes créées sur une grille parente ne peuvent être utilisées que pour positionner les enfants directs du conteneur de la grille. Toutes les zones et lignes de grille nommées définies par l'auteur ont été perdues sur n'importe quel autre élément qu'un enfant direct. subgrid permet de partager le dimensionnement des pistes, les modèles et les noms avec des grilles imbriquées. Cet article explique comment cela fonctionne.

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 bits de contenu : en-tête, paragraphe et lien. Ils ont chacun une longueur de texte différente, ce qui crée des alignements gênants dans les cartes, car elles se trouvent l'une à côté de l'autre.

Après la sous-grille, il est possible d'aligner le contenu de taille variable.

Trois cartes sont affichées côte à côte, chacune avec trois bits de contenu : en-tête, paragraphe et lien. Ils ont chacun 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 résout les problèmes d'alignement.

Navigateurs pris en charge

  • 117
  • 117
  • 71
  • 16

Source

Bases des sous-grilles

Voici un cas d'utilisation simple présentant les principes de base de CSS subgrid. Une grille est définie avec deux colonnes nommées, la première ayant une largeur de 20ch et la seconde "le reste" de l'espace 1fr. Les noms de colonne ne sont pas obligatoires, mais ils sont parfaits à des fins d’illustration et de formation.

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

Ensuite, un enfant de cette grille s'étend sur ces deux colonnes, est défini comme 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 leur colonne.
https://codepen.io/web-dot-dev/pen/NWezjXv

Voilà, les colonnes d'une grille parente ont été transmises d'un niveau à 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, mais faites-la pour grid-template-rows.

Partager une grille de "macros" 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 de leur choix. Désormais, les développeurs Web peuvent eux aussi le faire ! Ce workflow exact peut désormais être réalisé, et bien plus encore.

De la grille de macros à la conception finale. Les zones nommées de la grille sont créées à l'avance, et les composants ultérieurs sont placés comme vous le souhaitez.

La mise en œuvre du workflow de grille de concepteur le plus courant peut fournir d'excellents insights sur les fonctionnalités, les workflows et le potentiel de subgrid.

Voici une capture d'écran des outils pour les développeurs Chrome d'une grille de macros de mise en page sur mobile. Les lignes ont des noms et des zones claires pour l'emplacement des composants.

Capture d'écran des outils de développement en grille CSS de Chrome montrant une mise en page en grille de taille mobile dans laquelle les lignes et colonnes sont nommées de manière à permettre une identification rapide: à fond perdu, état système, navigation primaire, en-tête principal, main, pied de page et gestes système.

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 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 le design suivant.

Même superposition d'outils de développement CSS qu'auparavant, mais avec une partie de l'interface utilisateur du système mobile, des ombres et un peu de couleur. Cela aide à voir où la
conception va.

Ce parent contient plusieurs éléments imbriqués. La conception nécessite une image en pleine largeur sous les lignes de navigation et d'en-tête. Les noms de ligne des colonnes les plus à gauche et à droite sont fullbleed-start et fullbleed-end. En nommant les lignes de la grille de cette manière, les enfants peuvent s'aligner sur chacune d'elles simultanément à l'aide du raccourci d'emplacement de fullbleed. C'est très pratique, comme vous le verrez bientôt.

Capture d'écran agrandie de la superposition de grille des outils de développement, axée spécifiquement sur les noms des colonnes de début à fond perdu et de fin à fond perdu.

La mise en page globale des appareils étant créée avec des lignes et des colonnes nommées attrayantes, utilisez subgrid pour transmettre les lignes et colonnes bien nommées aux mises en page en grille imbriquées. C'est le moment magique subgrid. La mise en page de l'appareil transmet les lignes et colonnes nommées au conteneur d'applications, 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 valeur d'une sous-grille CSS est utilisée à la place d'une liste de pistes de la grille. Les lignes et colonnes de l'élément depuis son parent sont désormais les mêmes lignes et colonnes qu'il propose. Ainsi, les noms des lignes de la grille .device sont disponibles pour les enfants de .app, et non plus uniquement pour .app. Les éléments de .app ne pouvaient pas référencer les pistes de la grille créées par .device avant la sous-grille.

Une fois que tout est défini, l'image imbriquée peut maintenant s'afficher à fond perdu dans la mise en page grâce à subgrid. Pas de valeurs négatives ni d'astuces, mais une simple ligne qui dit "ma mise en page s'étend de fullbleed-start à fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}
La mise en page de macro terminée, complétée par une image imbriquée en pleine largeur positionnée correctement, annule les lignes principales de navigation et d'en-tête et s'étend sur chacune des lignes de colonnes nommées à fond perdu.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Et voilà, une grille de macro telle 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 sous-grille est à la fois familière et simple. Utilisez @supports et, entre parenthèses, demandez au navigateur s'il comprend sous-grille comme une valeur pour les colonnes ou les lignes du modèle. L'exemple suivant vérifie si la propriété grid-template-columns accepte le mot clé subgrid. Si la valeur est "true", 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'outils de développement performants sous forme de grille CSS. Chrome, Edge et Firefox disposent d'outils spécifiques pour vous aider avec la sous-grille. Chrome a annoncé ses outils en 115, tandis que Firefox les propose depuis un an ou plus.

Capture d'écran du badge de sous-grille détecté sur les éléments du panneau "Elements".

Ce badge se comporte comme un 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 sous-grille, de démonstrations et d'une source d'inspiration générale pour commencer. Si vous cherchez la prochaine étape pour votre sous-réseau, amusez-vous à explorer toutes ces excellentes ressources !

Fait partie de la série sur l'interopérabilité des nouveaux produits