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.

Trois cartes sont affichées côte à côte, chacune avec trois bits de contenu: un en-tête, un paragraphe et un lien. Chacun possède une longueur de texte différente, ce qui crée alignements gênants dans les cartes lorsqu'elles sont côte à côte.

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

Trois cartes sont affichées côte à côte, chacune avec trois bits de contenu: un en-tête, un paragraphe et un 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.

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

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.

De la grille de macros à la conception finale Les zones nommées en 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'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.

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 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.

La superposition de grille des outils pour les développeurs CSS est la même que précédemment, mais cette fois avec UI du système mobile présente, quelques ombres et un peu de couleur. Vous permet de déterminer la conception évolue.

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.

A zoom sur la capture d'écran de la superposition de grille dans les outils de développement, en mettant l'accent 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. 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;
}
La mise en page macro terminée, avec une image imbriquée pleine largeur posée correctement sur les lignes de navigation principale et d'en-tête, s'étendant à chacune des lignes de colonne nommées à fond perdu.
https://codepen.io/web-dot-dev/pen/WNLyjzX

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.

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

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 !