Sous-grille CSS

La grille CSS est un moteur de mise en page très puissant, mais les pistes de colonnes créées sur une grille parent ne peuvent être utilisées que pour positionner les enfants du conteneur de la 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 vous explique son fonctionnement.

Avant la sous-grille, le contenu était souvent personnalisé pour éviter les mises en page irrégulières, comme celui-ci.

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

Principes de base des sous-grilles

Voici un cas d'utilisation simple présentant 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 des colonnes ne sont pas obligatoires, parfait à 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 en tant que 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 */
}

Voilà, les colonnes d'une grille parent ont été transmises en dessous d'un niveau pour 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 "macro" au niveau de la page grille

Les concepteurs travaillent souvent avec des grilles partagées, dessinent des lignes sur une conception entière, pour aligner tous les éléments qu’ils veulent. Désormais, les développeurs Web peuvent aussi le faire ! Ce mot clé exact le workflow, et bien d'autres encore.

La mise en œuvre du workflow de grille de concepteur le plus courant peut fournir d'excellentes des 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 CSS suivant crée cette grille, avec des lignes et des colonnes nommées pour l'appareil mise en page. 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 sous les lignes de navigation et d'en-tête. Colonne la plus à gauche et à droite les noms de ligne sont fullbleed-start et fullbleed-end. Nommer les lignes de la grille de cette façon permet aux enfants de les aligner simultanément avec l'emplacement raccourci sur fullbleed. C'est très pratique, comme vous le verrez bientôt.

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. Ce c'est ce subgrid moment magique. 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 pistes sous la forme d'une grille. Les lignes et l'ensemble des colonnes s'étendant à partir de son parent, elles sont désormais les mêmes lignes et de colonnes qu'il propose. Les noms des lignes de la grille .device seront ainsi disponibles aux enfants de .app, au lieu de .app uniquement. Les éléments inclus dans .app étaient impossible de faire référence aux pistes de grille créées par .device avant la sous-grille.

Maintenant que tout est défini, l'image imbriquée peut s'afficher à fond perdu dans grâce à subgrid. Pas de valeurs négatives ni d'astuces. "Ma mise en page s'étend de fullbleed-start à fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}

Voilà, une grille de macros, telle qu'elle est utilisée par les concepteurs, et 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 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 accepte le mot clé subgrid, qui, si "true", signifie que la sous-grille peut être utilisée

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

Devtools

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. Annonce de Chrome leurs outils dans 115 tandis que Firefox les utilise depuis un an ou plus.

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

Ressources

Cette liste est une compilation d'articles, de démonstrations et de sources d'inspiration générales. pour commencer. Si vous recherchez l'étape suivante pour votre sous-grille une formation, 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 lors de la journée CSS 2022
• Cartes
  • Codepen de Jhey
  • Codepen d'Ahmad Shadeed
  • Codepen de Takeshi Kano
  • Codepen d'Arvid
  • Codepen de Chris Coyier
  • Codepen by 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 montrant les noms des lignes nommées et les interactions entre les sous-grilles
• Kevin Powell, présentation des principes de base 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 un outil de développement en superposition et une solution de remplacement
• Aaron Iker avec une belle utilisation typographique de la sous-grille pour l'alignement de base notes de bas de page
• Adam Argyle avec une image à fond perdu dans un article