Il y a quelques semaines, j'ai parlé à
Frontend NE à Newcastle et expliqué pour la plupart quelles fonctionnalités seraient dans CSS Grid Subgrid de Grid Level 2. N'ayant aucune implémentation de cette propriété (dans les navigateurs), j'ai modélisé un tas de démos en utilisant DevTools, pour cela performances.
Sur le chemin de San Francisco sur Smashing Conf, où j'ai dirigé un atelier de mise en page CSS, j'ai eu accès à la version d'essai de Firefox Nightly, qui avait une implémentation précoce de cette propriété.
Cela signifie que je dois refaire quelques diapositives pour mes performances en mai, de vraies captures d'écran y seront utilisées.
J'ai posté quelques captures d'écran sur Twitter et je publierai tous mes exemples dans
Grid by Example , dès que la propriété CSS Grid Subgrid fonctionnera avec le drapeau dans l'assemblage principal de Firefox Nigtly. Cependant, pour tous ceux qui ont des choses plus importantes à faire que de regarder Twitter le week-end, voici quelques captures d'écran. Ils contiennent des liens vers des exemples
My CodePen afin que vous puissiez voir le code des éléments Subgrid (sous-grille). J'ai mis en évidence la grille (grille) et la sous-grille (sous-grille) dans Firefox DevTools pour vous aider à voir ce que vous devez regarder.
Grille pour colonnes et lignes
Dans ce cas, la sous-grille se trouve dans les colonnes et les lignes de l'élément parent. Cela signifie que dans la région de sous-grille, il n'y a pas de grille masquée, car les deux tailles sont liées aux pistes disponibles du parent.
CodePen - Grille pour les colonnes et les lignesColonne uniquement maillée
Dans ce cas, j'ai utilisé une sous-grille pour les colonnes. Cela signifie que je peux utiliser des pistes de maillage implicites pour ajouter autant de lignes que nécessaire pour les éléments. Les lignes utilisent leur propre taille comme grille imbriquée sans sous-réseau.
CodePen - Grille de colonne uniquementSous-réseau uniquement
Dans ce cas, j'ai fait la sous-grille des lignes et défini les colonnes, comme d'habitude en unités fr.
Comme vous pouvez le voir, les chemins de colonne ne correspondent pas à ceux des parents, car ils utilisent leur propre définition de grille.
CodePen - Sous-grille uniquement pour les chaînesJe suis très heureux de constater des progrès dans le développement de CSS Grid Subgrid, ainsi que l'opportunité d'en parler lors de mes séminaires et rapports.
Vous trouverez plus d'informations sur Subgrid à ces liens: