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.

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

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 */
}

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.

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.

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.

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.

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;
}

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.

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 !

• MDN
• Rachel Andrew avec des sous-titres alignés
• Rachel Andrew avec 10 excellents exemples
• Rachel Andrew avec un site d'exemples
• Article sur Ahmad Shadeed
• Michelle Barker à la CSS Day 2022
• Fiches
  • Codepen de Jhey
  • Codepen d'Ahmad Shadeed
  • Codepen par Takeshi Kano
  • Codepen d'Arvid
  • Codepen de Chris Coyier
  • Codepen par Miriam Suzanne
• Chris Coyier avec des formulaires
• Facundo Corradini avec alignement du formulaire
• Chris Coyier avec des marqueurs d'éléments de liste alignés
• Michelle Barker qui sort du conteneur pour s'aligner sur la grille parente
• Miriam Suzanne montre les noms de lignes nommées et les interactions de sous-grille
• Kevin Powell sur les bases des zones nommées
• Kevin Powell avec des listes alignées
• Shannon Moeller avec des listes alignées
• Kevin Powell avec une grille au niveau de la page transmise aux composants
• Elad Shechter avec une superposition de devtool et un fallback
• Aaron Iker avec une belle utilisation typographique de la sous-grille pour l'alignement de base des notes de bas de page
• Adam Argyle avec une image à fond perdu dans un article