Grille CSS niveau 2 : voici la sous-grille

Nous sommes maintenant plus d'un an après l'arrivée de CSS Grid Layout dans la majorité de nos navigateurs, et le groupe de travail CSS travaille déjà sur le niveau 2 de la spécification. Dans cet article, je vais expliquer ce qui fait actuellement partie du brouillon de travail et de l'éditeur de cette spécification. Notez que tout ici est sujet à changement, et rien de tout cela ne fonctionne actuellement dans les navigateurs. Prenez ceci comme un aperçu du processus, je suis sûr que j'écrirai des articles plus pratiques au fur et à mesure que nous commencerons à voir les implémentations prendre forme.

Niveaux de spécification CSS

Les fonctionnalités CSS Grid que nous pouvons actuellement utiliser dans les navigateurs sont celles du niveau 1 de la spécification CSS Grid. Les différentes parties de CSS sont divisées en modules ; cette modularisation s'est produite lorsque CSS est passé de CSS 2.1, c'est pourquoi vous entendez parfois des gens parler de CSS3. En réalité, il n'y a pas de CSS3. Au lieu de cela, il y avait un ensemble de modules qui incluaient toutes les choses qui faisaient déjà partie de la spécification CSS2.1. Tout CSS qui existait dans CSS2.1 est devenu une partie d'un module de niveau 3, par conséquent, nous avons des sélecteurs CSS de niveau 3, comme les sélecteurs existaient dans CSS2.1.

Les nouvelles fonctionnalités CSS qui ne faisaient pas partie de CSS2.1, telles que CSS Grid Layout, commencent au niveau 1. La spécification CSS Grid Level 1 est essentiellement la première version de Grid. Une fois qu'un niveau de spécification atteint le statut de recommandation candidate, les nouvelles fonctionnalités majeures ne sont pas ajoutées. Cela signifie que les navigateurs et autres agents utilisateurs peuvent implémenter la spécification et qu'elle peut devenir une recommandation du W3C. Si de nouvelles fonctionnalités doivent être conçues, elles se produiront dans un nouveau niveau de la spécification. Nous sommes à ce stade avec CSS Grid Layout. La spécification de niveau 1 est au CR, et une spécification de niveau 2 a été créée afin de travailler sur de nouvelles fonctionnalités. Je suggérerais de consulter le brouillon de l'éditeur si vous souhaitez suivre les discussions sur les spécifications, car il contiendra toutes les dernières modifications.

Que contiendra le niveau 2 de CSS Grid ?

En fin de compte, la spécification de niveau 2 contiendra tout ce qui est déjà dans le niveau 1 plus quelques nouvelles fonctionnalités. Si vous jetez un coup d'œil à la spécification au moment de la rédaction, il y a une note expliquant que tout le niveau 1 doit être copié une fois que le niveau 2 atteint CR.

Nous pouvons alors nous attendre à trouver de nouvelles fonctionnalités, et le niveau 2 de la spécification de grille consiste à travailler sur la fonctionnalité de sous- grille de CSS Grid. Cette fonctionnalité a été supprimée de la spécification de niveau 1 afin de laisser le temps de bien comprendre les cas d'utilisation du sous-réseau et de donner plus de temps pour y travailler sans retarder le reste du niveau 1. Dans la suite de cet article, je vais jetez un coup d'œil à la fonctionnalité de sous-grille telle qu'elle est actuellement détaillée dans le brouillon de l'éditeur. Nous en sommes à un stade très précoce avec la fonctionnalité, cependant, c'est le moment idéal pour suivre et pour réellement aider à façonner la façon dont la spécification est développée. Mon objectif en écrivant cet article est d'expliquer certaines des choses discutées, afin que vous puissiez comprendre et apporter votre contribution aux discussions.

Qu'est-ce qu'un sous-réseau ?

Lorsque vous utilisez CSS Grid Layout, vous pouvez déjà imbriquer des grilles. Dans l'exemple ci-dessous, j'ai une grille parent avec six pistes de colonne et des pistes de trois lignes. J'ai positionné un élément sur cette grille de la ligne de colonne 2 à la ligne 6 et de la ligne de ligne 1 à 3. J'ai ensuite fait de cet élément un conteneur de grille et défini des pistes de colonne.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Les pistes de notre grille imbriquée n'ont aucune relation avec les pistes du parent. Cela signifie que si nous voulons pouvoir aligner les pistes de notre grille imbriquée avec les lignes de la grille extérieure, nous devons faire le travail et utiliser des méthodes de calcul de la taille des pistes qui garantissent que toutes les pistes restent égales. Dans l'exemple ci-dessus, les pistes sembleront alignées, jusqu'à ce qu'un élément de plus grande taille soit ajouté à une cellule de la grille (ce qui lui fera utiliser plus d'espace).

Pour les colonnes, il est souvent possible de contourner le scénario ci-dessus, essentiellement en limitant la flexibilité de la grille. Vous pouvez rendre vos colonnes d'unité fr minmax(0,1fr) afin qu'elles ignorent la taille de l'élément lors de la distribution de l'espace, ou vous pouvez revenir à l'utilisation de pourcentages. Cependant, cela supprime certains des avantages de l'utilisation de la grille et, lorsqu'il s'agit d'aligner des lignes dans une grille imbriquée, ces méthodes ne fonctionneront pas.

Disons que nous voulons une disposition de carte dans laquelle les cartes individuelles ont un en-tête, un corps et un pied de page. Nous voulons également que l'en-tête et le pied de page soient alignés sur les cartes.

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

Cela fonctionne tant que le contenu est de la même hauteur dans chaque en-tête et pied de page. Si nous avons du contenu supplémentaire, l'illusion est brisée et les en-têtes et pieds de page ne s'alignent plus sur la ligne.

Créer une sous-grille

Nous pouvons maintenant examiner comment la fonctionnalité de sous-grille est actuellement spécifiée et comment elle pourrait résoudre les problèmes que j'ai montrés ci-dessus.

Remarque : Au moment de la rédaction, aucun des codes ci-dessous ne fonctionne dans les navigateurs. Le but ici est d'expliquer la syntaxe et les concepts. La spécification finale est également susceptible de changer à partir de ces détails. Pour référence, j'ai écrit cet article sur la base du brouillon de l'éditeur disponible le 23 juin 2018.

Pour créer une sous-grille, nous aurons une nouvelle valeur pour grid-template-rows et grid-template-columns . Ces propriétés sont normalement utilisées avec une liste de pistes, qui définit le nombre et la taille des pistes de ligne et de colonne. Lors de la création d'une sous-grille, cependant, vous ne souhaitez pas spécifier ces pistes. Au lieu de cela, vous subgrid la valeur de sous-grille pour indiquer à la grille que cette grille imbriquée doit utiliser le nombre de pistes et le dimensionnement des pistes que la zone de grille qu'elle couvre s'étend.

Dans le code ci-dessous, j'ai une grille parent avec des pistes à 6 colonnes et des pistes à 3 rangées. La grille imbriquée est un élément de grille sur cette grille parent et s'étend de la ligne de colonne 2 à la ligne de colonne 6 et de la ligne de ligne 1 à la ligne de ligne 4. C'est comme notre exemple initial, cependant, nous pouvons maintenant y jeter un coup d'œil en utilisant sous-grille. La grille imbriquée a une valeur de subgrid pour grid-template-columns et grid-template-rows . Cela signifie que la grille imbriquée a maintenant des pistes à 4 colonnes et des pistes à 2 lignes, utilisant le même dimensionnement que les pistes définies sur le parent.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Cela signifierait que toute modification du dimensionnement de la piste sur le parent serait suivie par la grille imbriquée. Un mot plus long élargissant l'une des pistes de la grille parent aurait pour effet que cette piste de la grille imbriquée deviendrait également plus large, de sorte que les choses continueraient à s'aligner. Cela fonctionnerait également dans l'autre sens : les pistes de la grille parente pourraient s'élargir en fonction du contenu de la sous-grille.

Sous-grilles unidimensionnelles

Vous pouvez avoir une sous-grille dans une dimension et spécifier le dimensionnement des pistes dans une autre. Dans cet exemple suivant, la sous-grille est uniquement spécifiée sur grid-template-columns . La propriété grid-template-rows a une liste de pistes spécifiée. Les pistes de colonne resteront donc comme les quatre pistes que nous avons vues ci-dessus, mais les pistes de ligne peuvent être définies séparément des pistes du parent.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Cela signifie que les lignes de la sous-grille seront imbriquées dans la grille parente, comme lors de la création d'une grille imbriquée aujourd'hui. Comme notre grille imbriquée s'étend sur deux lignes du parent, une de ces lignes ou les deux devront s'étendre pour contenir le contenu de la sous-grille afin de ne pas provoquer de débordements.

Vous pouvez également avoir une sous-grille dans une dimension et l'autre dimension utiliser des pistes implicites. Dans l'exemple ci-dessous, je n'ai spécifié aucune piste de ligne et donné une valeur pour grid-auto-rows . Les lignes seront créées dans la grille implicite à la taille que j'ai spécifiée et, comme dans l'exemple précédent, le parent devra avoir de la place pour ces lignes ou se développer pour les contenir.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Numérotation des lignes et sous-grille

Si nous reprenons notre premier exemple, le dimensionnement des pistes de notre sous-grille est dicté par le parent dans les deux dimensions. Les numéros de ligne, cependant, agissent normalement dans la sous-grille. La première ligne de colonne dans le sens en ligne est la ligne 1, et la ligne à l'extrémité du sens en ligne est la ligne -1. Vous ne faites pas référence aux lignes de la sous-grille avec le numéro de ligne du parent.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Lacunes et sous-grilles

La sous-grille héritera de tout écart de colonne ou de ligne défini sur la grille parent, cependant, cela peut être annulé par les espaces de colonne et de ligne spécifiés sur la sous-grille. Si, par exemple, la grille parent avait un column-gap défini sur 20px, mais que la sous-grille avait alors un écart de column-gap défini sur 0, les cellules de la grille de la sous-grille gagneraient 10px de chaque côté afin de réduire l'écart à 0, avec la ligne de grille passant essentiellement au milieu de l'espace.

Nous pouvons maintenant voir comment la sous-grille nous aiderait à résoudre le deuxième cas d'utilisation depuis le début de cet article, celui d'avoir des cartes avec des en-têtes et des pieds de page alignés sur les cartes.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Noms de ligne et sous-grille

Tous les noms de ligne de votre grille parent seront transmis à la sous-grille. Par conséquent, si nous nommions les lignes sur notre grille parent, nous pourrions positionner l'élément en fonction de ces noms de ligne.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Vous pouvez également ajouter des noms de ligne à votre sous-grille, les lignes de grille peuvent avoir plusieurs noms de ligne afin que ces noms soient ajoutés aux lignes. Pour spécifier des noms de ligne, ajoutez une liste de ces noms après la valeur de subgrid -grille de grid-template-columns et grid-template-rows . Si nous prenons notre exemple ci-dessus et ajoutons également des noms aux lignes de la sous-grille, nous nous retrouverons avec deux noms de ligne pour n'importe quelle ligne de la sous-grille.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Pistes implicites et sous-grille

Une fois que vous avez décidé qu'une dimension de votre grille est une sous-grille, cela supprime la possibilité d'avoir des pistes implicites supplémentaires dans cette dimension. Si vous ajoutez plus d'éléments pouvant tenir, les éléments supplémentaires seront placés dans la dernière piste disponible de la sous-grille de la même manière que les éléments sont traités dans des grilles trop grandes. Une zone de grille créée dans la sous-grille qui s'étend sur plus de pistes qu'il n'y en a de disponible, aura sa dernière ligne définie sur la dernière ligne de la sous-grille.

Comme expliqué ci-dessus, cependant, vous pouvez faire en sorte qu'une dimension de votre sous-grille se comporte exactement de la même manière qu'une grille imbriquée normale, y compris les pistes implicites.

S'impliquer dans le processus

Le travail du groupe de travail CSS se déroule en public, sur GitHub, comme tout autre projet open source. Cela rend un peu plus facile de suivre le travail que tout s'est passé dans une liste de diffusion. Vous pouvez consulter les problèmes soulevés par rapport au niveau 2 de la spécification CSS Grid en recherchant les problèmes marqués comme css-grid-2 dans le référentiel GitHub du groupe de travail CSS. Si vous pouvez apporter des réflexions ou un cas d'utilisation à l'un de ces problèmes, ce serait le bienvenu.

Il existe d'autres fonctionnalités que les gens ont demandées pour CSS Grid Layout, et le fait qu'elles n'aient pas été incluses dans le niveau 2 ne signifie pas qu'elles ne sont pas prises en compte. Vous pouvez voir les niveaux d'une version de fonctionnalité dans un produit, ce n'est pas parce qu'une fonctionnalité ne fait pas partie du sprint actuel que cela ne se produira jamais. Le travail sur les nouvelles fonctionnalités de la plate-forme Web a tendance à prendre un peu plus de temps que la version moyenne d'un produit, mais il s'agit d'un processus similaire.

Combien de temps tout cela prend-il ?

Le développement des spécifications et la mise en œuvre du navigateur est un processus quelque peu circulaire et itératif. Ce n'est pas le cas que la spécification doive être «terminée» avant de voir certaines implémentations de navigateur. Les implémentations initiales sont susceptibles d'être derrière les indicateurs de fonctionnalité - tout comme l'était la spécification de grille d'origine. Gardez un œil sur ces apparitions, car une fois qu'il y a du code avec lequel jouer, il est beaucoup plus facile de penser à ces fonctionnalités !

J'espère que cette visite de ce qui pourrait arriver bientôt a été intéressante. Je suis ravi que la fonctionnalité de sous-grille soit en cours, car j'ai toujours pensé qu'elle était vitale pour un système de mise en page de grille complète pour le Web, surveillez cet espace pour plus d'informations sur la progression de la fonctionnalité et sur les implémentations de navigateur émergentes.