Grilles tout en bas

Aujourd'hui, nous allons examiner ce qui se passe lorsque nous utilisons display: grid et comment nous pourrions utiliser la nouvelle valeur de sous-grille de Grille-modèle-colonnes et Grille-modèle-rangées pour permettre des grilles tout au long de notre balisage, qui se rapportent les unes aux autres.

Cet article fait partie d'une série qui examinent divers aspects de la propriété d'affichage CSS et font suite aux deux premiers articles:

1. Les deux valeurs de l'affichage
2. Génération de boîtes
3. Grilles All The Way Down

Que se passe-t-il lorsque nous créons un conteneur de grille?

La disposition de grille CSS est activée à l'aide de l'affichage : grille . Si vous avez lu le premier article de cette série, vous saurez que cette propriété à valeur unique signifie en réalité display: block grid . Nous obtenons une zone de niveau de bloc définie comme un conteneur de grille avec des enfants directs qui sont des éléments de grille et participent à la présentation de la grille.

Si vous regardez les spécifications d'affichage, vous verrez que dans le tableau qui définit toutes les valeurs différentes pour display . Les mots conteneur de grille sont liés à la définition d'un conteneur de grille dans la spécification de grille . Par conséquent, pour savoir ce que cela signifie réellement, nous devons aller voir là-bas. Lorsque nous le faisons, nous obtenons des éclaircissements utiles sur le comportement d'un conteneur de grille.

On dit qu'un conteneur de grille établit un contexte de formatage de grille qui est similaire à un contexte de formatage de blocs (BFC). J’ai écrit un guide complet sur le contexte de la mise en forme des blocs . Dans cet article, vous découvrirez deux aspects d'un BFC identiques pour un contexte de formatage de grille. Les flotteurs ne pénètrent pas dans le conteneur de grille et les marges du conteneur ne se fondent pas avec celles du contenu.

Il existe toutefois des différences, une fois que nous sommes entrés dans le conteneur de grille. Enfants d'un conteneur de grille et ne participant pas à une disposition en bloc ou en ligne, ce sont des éléments de grille et donc participant à une disposition en grille. Cela signifie que certaines choses auxquelles nous sommes habitués dans les dispositions en bloc et en ligne ne sont pas vraies.

Si un élément de la disposition est flotté ou effacé, les flottantes et claires les propriétés n'ont pas d'effet une fois que l'élément devient un élément de grille. La propriété vertical-align n'a aucun effet et les pseudo-éléments :: first-letter et :: de première ligne ne peuvent pas être utilisés.

Le fait qu'un élément ne puisse pas être à la fois flottant et un élément de grille est utile pour créer des replis. Lors de la création d'une solution de repli pour les navigateurs ne prenant pas en charge la grille utilisant des flottants (lorsque la grille est prise en charge), vous n'avez rien de spécial à faire: le flottant est écrasé.

Je décris cette approche dans mon article sur . navigateurs sans grille . Il y a des situations où le comportement s'est avéré problématique, même si ces problèmes pourraient être résolus en utilisant une autre partie de CSS telle que décrite dans ce message, en décompressant un problème avec grid et floats, « Mises en page éditoriales, Exclusions et CSS Grid ".

Cela dit, si nous ne modifions pas la valeur de l'affichage de à nous ne verrions guère de différence entre nos disposition. Les enfants directs sont des éléments de grille. Cependant, par défaut, nous obtenons une grille à une colonne. Une grille a toujours une colonne et une ligne. Les autres lignes visibles après cette opération sont des lignes implicites, c'est-à-dire des lignes créées pour contenir le contenu.

Nous pouvons commencer à former quelque chose qui ressemble plus à une grille pour nous en donnant à la propriété une valeur de grid-template-rows . La propriété prend une liste de pistes en tant que valeur; si je lui donne trois pistes de 1fr, nous nous retrouvons maintenant avec une grille à trois colonnes et l'utilisation de la propriété gap me permet d'espacer ces cartes.

Nous avons maintenant quelque chose qui nous ressemble à un grille:

Chacun des éléments de la grille dans notre exemple a ses propres enfants. Les cartes ont des en-têtes et des pieds de page et une zone pour le contenu principal de la carte. Ces enfants sont des éléments de la grille, mais leurs enfants sont revenus à la disposition en mode bloc et en ligne. L'en-tête, la zone de contenu et le pied de page ne font aucune grille comme les choses. En effet, lorsque nous modifions la valeur de display en grid elle n’hérite pas, mais seuls les enfants deviennent des éléments de la grille; leurs enfants retournent à la disposition des blocs.

Nesting Grids

Si une carte a plus de contenu que les autres cartes, les cartes de cette rangée deviennent plus grandes. La valeur initiale de align-items pour les éléments de la grille est stretch . Nos cartes s'étirent à pleine hauteur. Cependant, les objets à l’intérieur sont en bloc et en ligne et ne s’étirent donc pas comme par magie pour remplir la carte. (C’est pourquoi, dans l’image ci-dessus, vous pouvez voir que les cartes avec moins de contenu ont un espace en bas.)

Si nous le voulions (pour que le pied de page reste toujours en bas), nous pourrions faire notre élément de grille est également une grille. Dans ce cas, une grille à une colonne est tout ce dont nous avons besoin. Nous pouvons ensuite définir les traces de lignes, en indiquant la zone dans laquelle se trouve la div avec une classe de contenu, d’une taille de piste de 1fr . Cela lui fait occuper tout l'espace disponible dans le conteneur et poussera le pied de page au bas de la carte.

Vous pouvez effectuer cette imbrication de grilles autant que vous le souhaitez. Je ne le considère pas vraiment comme une imbrication car nous ne créons pas de tables imbriquées ici, et nous utilisons généralement les éléments HTML structurels déjà en place. Nous modifions simplement la valeur de pour afficher niveau par niveau et définir ce qui convient le mieux aux enfants de cet élément. Cela peut être une mise en page flexible ou une mise en grille, mais le plus souvent ce sera une mise en page en bloc ou en ligne. Dans ce cas, nous n'avons rien à faire car c'est ce qui se produit par défaut.

Aligner les en-têtes et les pieds de page

Comme nous l'avons vu, si nous voulons un jeu de cartes disposé sur une grille , et nous voulons qu’ils affichent une carte aussi haute que la carte la plus grande, et nous voulons que les pieds de page soient déplacés vers le bas de la carte, nous avons besoin de très peu de CSS. La disposition CSS de l'exemple ci-dessus est la suivante:

 .cards {
  affichage: grille;
  espace: 20px;
  Grille-modèle-colonnes: 1fr 1fr 1fr;
}

article {
  affichage: grille;
  grid-template-rows: auto 1fr auto;
  intervalle de rangée: 20 px;
}

Et si nous voulions que la couleur de fond des en-têtes et des pieds de page soit alignée? Chaque carte est un élément de la grille, mais les en-têtes et les pieds de page se trouvent dans la grille de l'élément. Ils n’ont aucune relation les uns avec les autres et nous ne pouvons donc pas les aligner. Ici, il serait bien que nous puissions en quelque sorte hériter de la grille par l'intermédiaire des enfants.

Si nous pouvions définir une grille sur le parent qui comportait trois lignes, placez les cartes sur ces trois lignes et définissez l'en-tête, le contenu et le pied de page. asseyez-vous dans l'une des rangées. De cette façon, chaque en-tête serait dans la même rangée, et donc si un en-tête grandissait, toute la rangée grandissait également.

Nous n'avons pas de bonne solution à cela dans les navigateurs aujourd'hui, mais elle est en route. . La fonctionnalité de sous-grille de CSS Grid Layout Level 2 activera ce modèle exact. Vous pourrez créer une grille sur le parent, puis choisir de manière sélective les lignes et / ou les colonnes pour utiliser cette grille, plutôt que de définir une nouvelle grille sur l'élément enfant qui est complètement indépendante de cette grille.

Notez que les exemples qui suivent ne fonctionnent que pour le moment dans Firefox Nightly. La valeur de sous-réseau de grid-template-columns et de grid-template-rows est une nouvelle fonctionnalité qui fait partie du niveau 2 de la spécification de grille CSS. Pour essayer cette fonctionnalité, téléchargez une copie de Firefox Nightly.

Vous pouvez voir comment cela fonctionne dans les images ci-dessous. Dans la première image, j'ai créé trois pistes de rangée sur le parent et réparti la carte sur elles. Avec l'inspecteur de grille de Firefox mettant en surbrillance la grille, vous pouvez constater que les lignes du parent ne correspondent pas aux lignes utilisées par les enfants.

Grand aperçu )

Si, au lieu de définir trois lignes sur l’enfant, j’utilise la valeur de sous-grille pour grid-template-rows la carte utilise maintenant ces lignes sur le parent. Vous pouvez voir comment les deux sont maintenant alignés et donc les en-têtes et les pieds de page s'alignent également:

Ce que nous faisons ici avec la sous-grille n'est pas une nouvelle valeur d'affichage . L'élément qui est une sous-grille est un conteneur de grille lui-même, comme nous l'avons défini avec l'affichage : grid . Les éléments de la grille se comportent comme les éléments de la grille normalement. Il s'agit d'une disposition de grille normale – elle ne diffère pas de la grille imbriquée d'origine, si ce n'est qu'au lieu que l'élément ait son propre dimensionnement de piste de ligne, il utilise les pistes du parent.

 .cards {
  affichage: grille;
  espace: 20px;
  Grille-modèle-colonnes: 1fr 1fr 1fr;
  grid-template-rows: repeat (2, auto 1fr auto);
}

article {
  grille-row-end: span 3;
  affichage: grille;
  grid-template-rows: sous-grille;
}

C'est la bonne chose à propos de la sous-grille; il n’ya pas beaucoup à apprendre si vous savez déjà utiliser la disposition en grille. Vous pouvez lire le reste des détails dans mon précédent post ici sur Smashing Magazine, « CSS Grid Level 2: Voici la sous-grille ».

Hier (23 ^e mai 2019 ), la sous-grille a atterri dans Firefox Nightly, nous avons donc une implémentation testable de la valeur de sous-grille de grille-modèle-colonnes et grille-modèle-lignes . S'il vous plaît, prenez une copie de Nightly et essayez ceci. Avec une copie de Nightly, vous pouvez voir le dernier exemple dans ce CodePen:

Voyez si vous pouvez imaginer d'autres cas d'utilisation résolus en ayant la fonctionnalité de sous-réseau, ou peut-être des éléments qui, selon vous, manquent. Si une fonctionnalité n’est disponible que dans un navigateur Nightly, c’est le moment où il est possible d’apporter des modifications à la spécification si un problème est découvert. Faites donc une faveur à votre futur développeur Web et testez de telles fonctionnalités afin de pouvoir contribuer à la plate-forme Web et améliorer les choses.

Si vous pensez avoir trouvé un bogue dans l’implémentation de Firefox, vous Vous pouvez consulter le bogue principal d’implémentation sur Bugzilla, qui renvoie à des problèmes connexes dans la section Dépend de la page . Si vous ne voyez pas votre problème, créez aussi simple que possible un scénario de test réduit et soulevez le bogue. Si vous pensez que le sous-réseau devrait faire quelque chose pour résoudre un cas d'utilisation, et que c'est quelque chose qui n'est pas détaillé dans la spécification, vous pouvez soulever une question sur le groupe de travail CSS GitHub pour une amélioration potentielle. ] Qu'en est-il de display: contents ?

Si vous avez suivi, vous pourriez penser que display: contents (comme décrit dans le précédent article sur display ) pourrait résoudre les problèmes que le sous-réseau cherche à résoudre – celui de permettre aux enfants indirects de participer à une présentation en grille. Ce n’est pas le cas, et notre exemple de cartes est un moyen idéal de démontrer la différence.

Si, au lieu de faire de notre carte une grille avec : grille nous avons supprimé la boîte à l’aide de display: contents nous obtiendrions ce résultat dans ce prochain CodePen. (Essayez de supprimer la ligne : contenu des règles de la carte .card pour voir la différence.)

Dans cet exemple, la boîte de la carte a été supprimée et l'en-tête, le contenu et le pied de page participent directement à la disposition de la grille et sont placées automatiquement sur la grille. Ce n’était pas ce que nous voulions du tout! La valeur d'affichage de contenus sera vraiment utile une fois que les problèmes d'accessibilité mentionnés dans les navigateurs mentionnés dans mon dernier article seront résolus, mais cela résoudra des problèmes différents de celui que nous explorons.

More Reading And Exemples

J'ai créé un certain nombre d'exemples et de démos pour aider tout le monde à comprendre le sous-réseau. Vous pouvez les essayer aux liens ci-dessous:

(il)