Voici venir Subgrid

CSS Grid niveau 2 est déjà en cours de spécification, et la caractéristique principale de ce niveau de la spécification est de nous apporter des sous-réseaux. Dans cet article, Rachel Andrew explique les nouvelles fonctionnalités.

Nous avons maintenant plus d'un an de CSS Grid Layout qui atterrit dans la majorité de nos navigateurs, et le CSS Working Group 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 d'édition de cette spécification. Notez que tout ce qui est ici est sujet à changement, et aucun d'entre eux ne fonctionne actuellement dans les navigateurs. Prenez cela comme un aperçu du processus, je suis sûr que je vais écrire des morceaux plus pratiques que nous commençons à voir les implémentations prendre forme.

Niveaux de spécifications CSS

Les fonctionnalités CSS Grid que nous pouvons actuellement utiliser dans les navigateurs sont ceux de 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 comprenait toutes les choses qui faisaient déjà partie de la spécification CSS2.1. Tout code CSS qui existait dans CSS2.1 est devenu partie d'un module de niveau 3. Par conséquent, nous avons des sélecteurs CSS niveau 3, car les sélecteurs existaient dans CSS2.1.

Nouvelles fonctionnalités CSS qui ne faisaient pas partie de CSS2.1, telles que CSS Grid Layout, commencez 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 du candidat, 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 apparaîtront dans un nouveau niveau de la spécification. Nous sommes à ce stade avec CSS Grid Layout. La spécification de niveau 1 est en CR et une spécification de niveau 2 a été créée pour que les nouvelles fonctionnalités puissent être travaillées. Je suggère de regarder le brouillon de l'éditeur si vous voulez suivre avec des discussions de spécification, car cela contiendra toutes les dernières modifications.

Qu'est-ce que le niveau 2 de CSS Grid va contenir?

Finalement, la spécification de niveau 2 contiendra tout ce qui est déjà au niveau 1 plus de nouvelles fonctionnalités. Si vous jetez un oeil à la spécification au moment de l'écriture, il y a une note expliquant que tout le niveau 1 devrait être copié une fois que le niveau 2 atteint CR

Nous pouvons alors espérer trouver de nouvelles fonctionnalités, et le niveau 2 de la spécification de la grille est tout sur l'élaboration de la fonctionnalité sous-grille de CSS Grid. Cette fonctionnalité a été supprimée de la spécification de niveau 1 afin de permettre de comprendre correctement les cas d'utilisation de subgrid, et de donner plus de temps pour y travailler sans tenir le reste du niveau 1. Dans la suite de cet article, je vais Jetez un coup d'œil à la fonction de sous-grille telle qu'elle est actuellement détaillée dans le brouillon de l'éditeur. Nous 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 but 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 la mise en page CSS, vous pouvez déjà grilles. Dans l'exemple ci-dessous, j'ai une grille parentale avec six pistes de colonnes 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 des pistes de colonne définies.

 .grid {
    affichage: grille;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto automatique;
}

.article {
    grille-colonne: 2/6;
    grille-rangée: 1/3;
    affichage: grille;
    grid-template-columns: 2fr 1fr 2fr 1fr;
}

Les pistes de notre grille imbriquée n'ont aucun lien 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 externe, 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 (en utilisant plus d'espace).

Grand aperçu )

Pour les colonnes, il est souvent possible de contourner le scénario ci-dessus, essentiellement en limitant la flexibilité de la grille. Vous pouvez faire vos fr colonnes de l'unité minmax (0,1fr) afin qu'ils ignorent la taille de l'objet lors de la distribution spatiale, ou vous pouvez revenir à l'utilisation des pourcentages. Cependant, cela supprime certains des avantages de l'utilisation de la grille et, quand 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 cartes dans laquelle les cartes individuelles ont un en-tête. et pied de page. Nous voulons également que l'en-tête et le pied de page s'alignent sur les cartes.

 .cards {
    affichage: grille;
    grid-template-columns: 1fr 1fr 1fr;
    intervalle de grille: 20px;
}
    
.carte {
    affichage: grille;
    grid-template-rows: auto 1fr auto;
} 

Cela fonctionne tant que le contenu a 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 sont plus alignés sur la ligne.

Création d'un sous-réseau

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

Note : Au moment de l'écriture, 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 basé sur le brouillon de l'éditeur disponible le 23 juin 2018.

Pour créer un 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 lignes et de colonnes. Cependant, lors de la création d'un sous-réseau, vous ne souhaitez pas spécifier ces pistes. Au lieu de cela, vous utilisez la valeur de sous-grille pour indiquer à la grille que cette grille imbriquée doit utiliser le nombre de pistes et le dimensionnement de la piste qu'elle recouvre.

avec des pistes à 6 colonnes et des pistes à 3 rangs. La grille imbriquée est un élément de grille sur cette grille parente 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. Cela ressemble à notre exemple initial. sous-grille. La grille imbriquée a une valeur de sous-grille pour les deux 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, en utilisant le même dimensionnement que les pistes définies sur le parent.

 .grid {
    affichage: grille;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto automatique;
}

.article {
    grille-colonne: 2/6;
    grille-rangée: 1/3;
    affichage: grille;
    grid-template-columns: sous-grille;
    grid-template-rows: sous-grille;
} 

Cela signifierait que toute modification de la taille de la piste sur le parent serait suivie par la grille imbriquée. Un mot plus long rendant plus large l'une des pistes de la grille parente entraînerait une augmentation de la largeur de cette piste dans la grille imbriquée, de sorte que les choses continueraient à s'aligner. Cela fonctionnerait également dans l'autre sens: les traces de la grille parentale pourraient devenir plus larges en fonction du contenu du sous-maillage.

Sous-granularités unidimensionnelles

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

.la grille {
    affichage: grille;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto automatique;
}

.article {
    grille-colonne: 2/6;
    grille-rangée: 1/3;
    affichage: grille;
    grid-template-columns: sous-grille;
    grid-template-rows: 10em 5em 200px 200px;
} 

Cela signifie que les lignes du sous-réseau seront imbriquées à l'intérieur de la grille parente, tout 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, l'une de ces lignes ou les deux devront être développées pour contenir le contenu du sous-réseau afin de ne pas provoquer de débordements.

Vous pouvez également avoir une sous-grille dans une dimension et l'autre dimension utilise 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 aura besoin d'espace pour ces lignes ou de les développer pour les contenir.

 .grid {
    affichage: grille;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto automatique;
}

.article {
    grille-colonne: 2/6;
    grille-rangée: 1/3;
    affichage: grille;
    grid-template-columns: sous-grille;
    grid-auto-rows: minmax (200px, auto);
} 

Numérotation de lignes et sous-réseaux

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

 .grid {
    affichage: grille;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto automatique;
}

.article {
    grille-colonne: 2/6;
    grille-rangée: 1/3;
    affichage: grille;
    grid-template-columns: sous-grille;
    grid-template-rows: sous-grille;
}

.subitem {
    grille-colonne: 2/4;
    grille-rangée: 2;
} 

Lacunes et sous-mailles

La sous-grille héritera de toute lacune de colonne ou de ligne définie sur la grille parente, mais elle peut être ignorée par les espaces de colonne et de ligne spécifiés dans le sous-maillage. Si, par exemple, la grille parente avait un intervalle de colonnes défini à 20px, mais que le sous-réseau avait alors l'intervalle de colonnes défini sur 0, les cellules de la grille recevraient 10px sur chaque côté afin de réduire l'écart à 0, avec la ligne de la grille fonctionnant essentiellement au milieu de l'écart.

Nous pouvons maintenant voir comment un sous-graphique nous aiderait à résoudre le second cas d'utilisation depuis le début de cet article. d'avoir des cartes avec en-têtes et pieds de page qui s'alignent sur les cartes.

 .grid {
    affichage: grille;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto 1fr auto;
    intervalle de grille: 20px;
}
    
.carte {
    grille-rangée: auto / span 3; / * utilise trois lignes de la grille parente * /
    affichage: grille;
    grid-template-rows: sous-grille;
    intervalle de grille: 0; / * Réglez l'écart à 0 sur le sous-réseau afin que nos cartes ne comportent pas de trous * /
} 

Noms de lignes et sous-réseaux

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

 .grid {
    affichage: grille;
    grille-gabarit-colonnes: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g];
    grid-template-rows: auto auto automatique;
}

.article {
    grille-colonne: 2/6;
    grille-rangée: 1/3;
    affichage: grille;
    grid-template-columns: sous-grille;
    grid-template-rows: 10em 5em 200px 200px;
}

.subitem {
    grille-colonne: c / e;
} 

Vous pouvez également ajouter des noms de lignes à votre sous-grille, les lignes de la grille peuvent avoir plusieurs noms de lignes, de sorte que ces noms seront ajoutés aux lignes. Pour spécifier les noms de ligne, ajoutez une liste de ces noms après la valeur de sous-grille de grid-template-columns et grid-template-rows . Si nous prenons notre exemple ci-dessus et ajoutons également des noms aux lignes de sous-maillage, nous finirons par deux noms de ligne pour chaque ligne du sous-réseau.

 .grid {
    affichage: grille;
    grille-gabarit-colonnes: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g];
    grid-template-rows: auto auto automatique;
}

.article {
    grille-colonne: 2/6;
    grille-rangée: 1/3;
    affichage: grille;
    grid-template-columns: sous-grille [sub-a] [sub-b] [sub-c] [sub-d] [sub-e];
    grid-template-rows: 10em 5em 200px 200px;
}

.subitem {
    grille-colonne: c / e;
} 

Pistes et sous-réseaux implicites

Une fois que vous avez décidé qu'une dimension de votre grille est un sous-réseau, cela supprime la possibilité d'avoir des traces implicites supplémentaires dans cette dimension. Si vous ajoutez d'autres éléments, 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 le sous-réseau qui couvre plus de pistes que celles disponibles aura sa dernière ligne définie sur la dernière ligne du sous-réseau.

Cependant, comme expliqué ci-dessus, vous pouvez avoir une dimension de votre sous-grille exactement dans le de la même manière qu'une grille imbriquée normale, y compris des pistes implicites.

S'impliquer dans le processus

Le travail du CSS Working Group se passe en public, sur GitHub comme n'importe quel autre projet open-source. Cela rend un peu plus facile à suivre avec le travail que tout s'est passé dans une liste de diffusion. Vous pouvez jeter un oeil aux problèmes soulevés par le niveau 2 de la spécification CSS Grid en recherchant les problèmes étiquetés css-grid-2 dans le référentiel GitHub du groupe de travail CSS. Si vous pouvez apporter des idées ou un cas d'utilisation à l'un de ces problèmes, il serait le bienvenu.

D'autres fonctionnalités ont été demandées pour la mise en page CSS, et le fait qu'elles n'aient pas été incluses dans le niveau 2 ne signifie pas qu'ils ne sont pas considérés. Vous pouvez voir les niveaux comme une version de fonctionnalité peut être dans un produit, juste parce que certaines fonctionnalités ne font pas partie du sprint actuel, ne signifie pas que cela n'arrivera jamais. Le travail sur les nouvelles fonctionnalités de la plateforme Web prend un peu plus de temps que la version moyenne du produit, mais c'est un processus similaire.

Le développement des spécifications et la mise en œuvre du navigateur sont un processus circulaire et itératif. . Ce n'est pas le cas que la spécification doit être «terminée» avant que nous verrons certaines implémentations de navigateur. Les implémentations initiales sont susceptibles d'être derrière des indicateurs de caractéristiques – tout comme la spécification de grille d'origine. Gardez un œil sur ces apparitions, car une fois qu'il y a du code à jouer, cela rend la réflexion sur ces fonctionnalités beaucoup plus facile!

J'espère que cette tournée 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'il était vital pour un système de mise en page de grille complet pour le web, regardez cet espace pour plus de nouvelles sur la progression de cette fonctionnalité. Éditorial « /> (il)