Meilleures pratiques avec la mise en page de la grille CSS

Une question de plus en plus courante - maintenant que les gens utilisent CSS Grid Layout en production - semble être "Quelles sont les meilleures pratiques?" La réponse courte à cette question est d'utiliser la méthode de mise en page telle que définie dans la spécification. Les parties particulières de la spécification que vous choisissez d'utiliser, et en fait la manière dont vous combinez Grid avec d'autres méthodes de mise en page telles que Flexbox, dépendent de ce qui fonctionne pour les modèles que vous essayez de créer et de la manière dont vous et votre équipe souhaitez travailler.

En regardant plus en profondeur, je pense que cette demande de «meilleures pratiques» indique peut-être un manque de confiance dans l'utilisation d'une méthode de mise en page très différente de celle qui prévalait auparavant. Peut-être une préoccupation que nous utilisons Grid pour des choses pour lesquelles il n'a pas été conçu, ou que nous n'utilisons pas Grid quand nous devrions l'être. Peut-être que cela se résume à des soucis concernant la prise en charge des anciens navigateurs ou à la manière dont Grid s'intègre dans notre flux de travail de développement.

Dans cet article, je vais essayer de couvrir certaines des choses qui pourraient être décrites comme les meilleures pratiques, et certaines choses dont vous n'avez probablement pas à vous soucier.

Le sondage

Pour aider à informer cet article, je voulais savoir comment d'autres personnes utilisaient Grid Layout en production, quels étaient les défis auxquels ils étaient confrontés, qu'est-ce qu'ils appréciaient vraiment à ce sujet ? Y avait-il des questions communes, des problèmes ou des méthodes utilisées. Pour le savoir, j'ai préparé une enquête rapide, posant des questions sur la façon dont les gens utilisaient Grid Layout, et en particulier, ce qu'ils aimaient le plus et ce qu'ils trouvaient difficile.

Dans l'article qui suit, je ferai référence et citerai directement certaines de ces réponses. Je proposerai également des liens vers de nombreuses autres ressources, où vous pourrez en savoir plus sur les techniques décrites. Il s'est avéré qu'il y avait bien plus d'un article intéressant à déballer dans les réponses à l'enquête. Je vais aborder certaines des autres choses qui ont été soulevées dans un prochain post.

Accessibilité

S'il y a une partie de la spécification Grid dont vous devez faire attention lors de l'utilisation, c'est lorsque vous utilisez tout ce qui pourrait entraîner une réorganisation du contenu :

« Les auteurs doivent utiliser l'ordre et les propriétés de placement de la grille uniquement pour la réorganisation visuelle, et non logique, du contenu. Les feuilles de style qui utilisent ces fonctionnalités pour effectuer une réorganisation logique ne sont pas conformes. »

— Spécification de la grille : réorganisation et accessibilité

Ce n'est pas unique à Grid, cependant, la possibilité de réorganiser le contenu si facilement en deux dimensions en fait un problème plus important pour Grid. Cependant, si vous utilisez une méthode permettant de réorganiser le contenu - que ce soit Grid, Flexbox ou même le positionnement absolu - vous devez veiller à ne pas déconnecter l'expérience visuelle de la façon dont le contenu est structuré dans le document. Les lecteurs d'écran (et les personnes naviguant dans le document à l'aide d'un clavier uniquement) suivront l'ordre des éléments dans la source.

Les endroits où vous devez être particulièrement prudent sont lorsque vous utilisez flex-direction pour inverser l'ordre dans Flexbox ; la propriété order dans Flexbox ou Grid ; tout placement d'éléments de grille à l'aide de n'importe quelle méthode, s'il déplace les éléments hors de l'ordre logique dans le document ; et en utilisant le mode d'emballage dense de grid-auto-flow .

Pour plus d'informations sur ce problème, consultez les ressources suivantes :

• Disposition de la grille et accessibilité - MDN
• Flexbox et la navigation au clavier se déconnectent

Quelles méthodes de disposition de grille dois-je utiliser ?

"Avec tant de choix dans Grid, c'était un défi de s'en tenir à une manière cohérente de l'écrire (par exemple, nommer ou non les lignes de la grille, définir les zones de modèle de grille, les replis, les requêtes de médias) afin qu'il soit maintenable par l'ensemble. équipe."

—Michelle Barker

Lorsque vous jetez un coup d'œil à Grid pour la première fois, cela peut sembler écrasant avec tant de façons différentes de créer une mise en page. En fin de compte, cependant, tout se résume à ce que les choses soient positionnées d'une ligne de la grille à l'autre. Vous avez le choix en fonction de la mise en page que vous essayez de réaliser, ainsi que de ce qui fonctionne bien pour votre équipe et le site que vous construisez.

Il n'y a pas de bonne ou de mauvaise façon. Ci-dessous, je vais reprendre certains des thèmes communs de la confusion. J'ai également déjà couvert de nombreux autres domaines potentiels de confusion dans un article précédent "Grid Gotchas and Stumbling Blocks".

Dois-je utiliser une grille implicite ou explicite ?

La grille que vous définissez avec grid-template-columns et grid-template-rows est appelée grille explicite. La grille explicite permet de nommer les lignes sur la grille et vous donne également la possibilité de cibler la ligne de fin de la grille avec -1 . Vous choisirez une grille explicite pour faire l'une ou l'autre de ces choses et en général lorsque vous avez une mise en page entièrement conçue et que vous savez exactement où vos lignes de grille doivent aller et la taille des pistes.

J'utilise le plus souvent la grille implicite pour les pistes de ligne. Je veux définir les colonnes, mais les lignes seront simplement dimensionnées automatiquement et grossiront pour contenir le contenu. Vous pouvez contrôler la grille implicite dans une certaine mesure avec grid-auto-columns et grid-auto-rows , cependant, vous avez moins de contrôle que si vous définissez tout.

Vous devez décider si vous savez exactement combien de contenu vous avez et donc le nombre de lignes et de colonnes — auquel cas vous pouvez créer une grille explicite. Si vous ne savez pas combien de contenu vous avez, mais que vous voulez simplement créer des lignes ou des colonnes pour contenir tout ce qui existe, vous utiliserez la grille implicite.

Néanmoins, il est possible de combiner les deux. Dans le CSS ci-dessous, j'ai défini trois colonnes dans la grille explicite et trois lignes, donc les trois premières lignes de contenu seront les suivantes :

• Une piste d'au moins 200 pixels de hauteur, mais qui s'agrandit pour agrandir le contenu,
• Une piste fixée à 400px de hauteur,
• Une piste d'au moins 300 pixels de hauteur (mais qui s'agrandit).

Tout autre contenu ira dans une ligne créée dans la grille implicite, et j'utilise la propriété grid-auto-rows pour que ces pistes mesurent au moins 300 pixels de haut, en se développant en auto .

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

Une grille flexible avec un nombre flexible de colonnes

En utilisant la notation répétée, le remplissage automatique et minmax, vous pouvez créer un modèle d'autant de pistes que possible dans un conteneur, supprimant ainsi dans une certaine mesure le besoin de Media Queries. Cette technique peut être trouvée dans ce didacticiel vidéo, et également démontrée avec des idées similaires dans mon récent article "Utilisation des requêtes multimédias pour la conception réactive en 2018".

Choisissez cette technique lorsque vous souhaitez que le contenu tombe en dessous du contenu précédent lorsqu'il y a moins d'espace et que vous êtes heureux de permettre une grande flexibilité dans le dimensionnement. Vous avez spécifiquement demandé que vos colonnes s'affichent avec une taille minimale et qu'elles se remplissent automatiquement .

Il y avait quelques commentaires dans l'enquête qui m'ont fait me demander si les gens choisissaient cette méthode alors qu'ils voulaient vraiment une grille avec un nombre fixe de colonnes. Si vous vous retrouvez avec un nombre imprévisible de colonnes à certains points d'arrêt, il serait peut-être préférable de définir le nombre de colonnes - et de le redéfinir avec des requêtes multimédias si nécessaire - plutôt que d'utiliser auto-fill auto-fit .

Quelle méthode de dimensionnement des pistes dois-je utiliser ?

J'ai décrit en détail le dimensionnement des pistes dans mon article "How Big Is That Box ? Comprendre le dimensionnement dans la disposition en grille », cependant, je reçois souvent des questions sur la méthode de dimensionnement des pistes à utiliser. En particulier, on me pose des questions sur la différence entre le pourcentage de dimensionnement et l'unité fr .

Si vous utilisez simplement l'unité fr comme spécifié, cela diffère de l'utilisation d'un pourcentage car il distribue l'espace disponible. Si vous placez un élément plus grand dans une piste, la façon dont le fr jusqu'à fonctionnera est de permettre à cette piste de prendre plus d'espace et de distribuer ce qui reste.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

Pour que l'unité fr distribue tout l'espace dans le conteneur de grille, vous devez lui donner une taille minimale de 0 en utilisant minmax() .

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Vous pouvez donc choisir d'utiliser fr dans l'un ou l'autre de ces scénarios : ceux où vous souhaitez une distribution d'espace à partir d'une base auto (le comportement par défaut) et ceux où vous souhaitez une distribution égale. J'utiliserais généralement l'unité fr car elle détermine ensuite le dimensionnement pour vous et permet l'utilisation de pistes ou d'espaces à largeur fixe. La seule fois où j'utilise un pourcentage à la place, c'est lorsque j'ajoute des composants de grille à une mise en page existante qui utilise également d'autres méthodes de mise en page. Si je veux que mes composants de grille s'alignent sur une disposition flottante ou flexible qui utilise des pourcentages, les utiliser dans ma disposition de grille signifie que tout utilise la même méthode de dimensionnement.

Placer automatiquement des éléments ou définir leur position ?

Vous constaterez souvent que vous n'avez besoin de placer qu'un ou deux éléments dans votre mise en page, et le reste se met en place en fonction de l'ordre du contenu. En fait, c'est un très bon test que vous n'avez pas déconnecté la source et l'affichage visuel. Si les choses se mettent à peu près en place en fonction du placement automatique, elles sont probablement dans un bon ordre.

Une fois que j'ai décidé où tout va, cependant, j'ai tendance à attribuer une position à tout. Cela signifie que je ne me retrouve pas avec des choses étranges qui se produisent si quelqu'un ajoute quelque chose au document et que la grille le place automatiquement dans un endroit inattendu, jetant ainsi la mise en page. Si tout est placé, Grid placera cet élément dans la prochaine cellule de grille vide disponible. Ce n'est peut-être pas exactement là où vous le voulez, mais s'asseoir à la fin de votre mise en page est probablement mieux que de sauter au milieu et de pousser d'autres choses.

Quelle méthode de positionnement utiliser ?

Lorsque vous travaillez avec Grid Layout, tout se résume finalement à placer des éléments d'une ligne à l'autre. Tout le reste est essentiellement une aide pour cela.

Décidez avec votre équipe si vous souhaitez nommer des lignes, utiliser des zones de modèle de grille ou si vous allez utiliser une combinaison de différents types de mise en page. Je trouve que j'aime utiliser les zones de modèle de grille pour les petits composants en particulier. Cependant, il n'y a pas de bien ou de mal. Déterminez ce qui est le mieux pour vous.

Grille en combinaison avec d'autres mécanismes de mise en page

N'oubliez pas que Grid Layout n'est pas la seule véritable méthode de mise en page pour les gouverner toutes, elle est conçue pour un certain type de mise en page, à savoir la mise en page en deux dimensions. D'autres méthodes de mise en page existent toujours et vous devez considérer chaque modèle et ce qui lui convient le mieux.

Je pense que c'est en fait assez difficile pour ceux d'entre nous qui ont l'habitude de bidouiller avec des méthodes de mise en page pour leur faire faire quelque chose pour lequel ils n'ont pas vraiment été conçus. C'est un très bon moment pour prendre du recul, examiner les méthodes de mise en page pour les tâches pour lesquelles elles ont été conçues et n'oubliez pas de les utiliser pour ces tâches.

En particulier, quelle que soit la fréquence à laquelle j'écris sur Grid versus Flexbox, on me demandera lequel les gens devraient utiliser. Il existe de nombreux modèles où l'une ou l'autre méthode de mise en page est parfaitement logique et c'est vraiment à vous de décider. Personne ne vous criera dessus pour avoir sélectionné Flexbox sur Grid ou Grid over Flexbox.

Dans mon propre travail, j'ai tendance à utiliser Flexbox pour les composants où je souhaite que la taille naturelle des éléments contrôle fortement leur disposition, en poussant essentiellement les autres éléments. J'utilise aussi souvent Flexbox parce que je veux un alignement, étant donné que les propriétés Box Alignment ne sont disponibles que dans Flexbox et Grid. Je pourrais avoir un conteneur Flex avec un élément enfant, afin que je puisse aligner cet enfant.

Un signe que Flexbox n'est peut-être pas la méthode de mise en page que je devrais choisir est lorsque je commence à ajouter des pourcentages de largeur aux éléments flexibles et à définir flex-grow sur 0. La raison d'ajouter des pourcentages de largeur aux éléments flexibles est souvent parce que j'essaie de ligne les aligner en deux dimensions (aligner les choses en deux dimensions est exactement ce à quoi sert Grid). Cependant, essayez les deux et voyez ce qui convient le mieux au contenu ou au modèle de conception. Il est peu probable que vous causiez des problèmes en le faisant.

Grille d'imbrication et éléments flexibles

Cela revient également souvent, et il n'y a absolument aucun problème à faire d'un élément de grille un conteneur de grille, imbriquant ainsi une grille dans une autre. Vous pouvez faire la même chose avec Flexbox, en créant un Flex Item et un Flex Container. Vous pouvez également faire d'un élément de grille et d'un conteneur flexible ou d'un élément flexible un conteneur de grille - aucune de ces choses n'est un problème !

Ce que nous ne pouvons pas faire actuellement, c'est imbriquer une grille dans une autre et faire en sorte que la grille imbriquée utilise les pistes de grille définies sur le parent global. Cela serait très utile et c'est ce que les propositions de sous-réseaux du niveau 2 de la spécification de réseau espèrent résoudre. Une grille imbriquée devient actuellement une nouvelle grille, vous devez donc faire attention au dimensionnement pour vous assurer qu'elle s'aligne avec toutes les pistes parentes.

Vous pouvez avoir plusieurs grilles sur une seule page

Un commentaire est apparu à quelques reprises dans l'enquête qui m'a surpris, il semble y avoir une idée qu'une grille devrait être confinée à la mise en page principale, et que plusieurs grilles sur une page n'étaient peut-être pas une bonne chose. Vous pouvez avoir autant de grilles que vous le souhaitez ! Utilisez la grille pour les grandes et les petites choses, si cela a du sens sous forme de grille, utilisez Grid.

Solutions de repli et prise en charge des anciens navigateurs

« La grille utilisée conjointement avec @supports nous a permis de mieux contrôler le nombre de variations de mise en page que nous pouvons nous attendre à voir. Cela a également très bien fonctionné avec notre approche d'amélioration progressive, ce qui signifie que nous pouvons récompenser ceux qui ont des navigateurs modernes sans empêcher l'accès au contenu à ceux qui n'utilisent pas les dernières technologies.

— Joe Lambert travaillant sur rareloop.com

Dans l'enquête, de nombreuses personnes ont mentionné les anciens navigateurs, cependant, il y avait une répartition raisonnablement égale entre ceux qui pensaient que la prise en charge des anciens navigateurs était difficile et ceux qui pensaient que c'était facile en raison des requêtes de fonctionnalités et du fait que Grid remplace les autres méthodes de mise en page. J'ai longuement écrit sur les mécanismes de création de ces replis dans "Utilisation de la grille CSS : prise en charge des navigateurs sans grille".

En général, les navigateurs modernes sont beaucoup plus interopérables que leurs homologues précédents. Nous avons tendance à voir beaucoup moins de "bogues de navigateur" réels et si vous utilisez correctement HTML et CSS, vous constaterez généralement que ce que vous voyez dans un navigateur est le même que dans un autre.

Nous avons, bien sûr, des situations dans lesquelles un navigateur n'a pas encore fourni de support pour une certaine spécification, ou certaines parties d'une spécification. Avec Grid, nous avons eu beaucoup de chance dans la mesure où les navigateurs ont livré Grid Layout de manière très complète et interopérable en peu de temps les uns des autres. Par conséquent, nos considérations pour les tests ont tendance à être de tester les navigateurs avec Grid et sans Grid. Vous avez peut-être également choisi d'utiliser la version avec préfixe -ms dans IE10 et IE11, ce qui nécessiterait alors des tests en tant que troisième type de navigateur.

Les navigateurs qui prennent en charge la disposition de grille moderne (pas la version IE) prennent également en charge les requêtes de fonctionnalités. Cela signifie que vous pouvez tester la prise en charge de Grid avant de l'utiliser.

Test des navigateurs qui ne prennent pas en charge la grille

Lorsque vous utilisez des solutions de secours pour les navigateurs sans prise en charge de Grid Layout (ou en utilisant la version avec préfixe -ms pour IE10 et 11), vous souhaiterez tester la façon dont ces navigateurs restituent Grid Layout. Pour ce faire, vous avez besoin d'un moyen d'afficher votre site dans un exemple de navigateur.

Je n'adopterais pas l'approche consistant à casser votre requête de fonctionnalité en vérifiant la prise en charge de quelque chose d'absurde ou en mal orthographiant la valeur grid . Cette approche ne fonctionnera que si votre feuille de style est incroyablement simple et que vous avez absolument tout mis en œuvre avec votre mise en page de grille dans les requêtes de fonctionnalités. C'est une méthode de travail très fragile et qui prend du temps, surtout si vous utilisez beaucoup Grid. De plus, un navigateur plus ancien ne prendra pas seulement en charge la mise en page de la grille, mais il y aura également d'autres propriétés CSS non prises en charge. Si vous recherchez les "meilleures pratiques", alors vous mettre en place pour être en bonne position pour tester votre travail est là-haut !

Il existe plusieurs façons simples de vous mettre en place avec une méthode appropriée pour tester vos replis. La méthode la plus simple - si vous disposez d'une connexion Internet raisonnablement rapide et que cela ne vous dérange pas de payer un abonnement - consiste à utiliser un service tel que BrowserStack. Il s'agit d'un service qui permet de visualiser des sites Web (même ceux en développement sur votre ordinateur) sur une multitude de navigateurs réels. BrowserStack propose des comptes gratuits pour les projets open source.

Pour tester localement, ma suggestion serait d'utiliser une machine virtuelle avec votre navigateur cible installé. Microsoft propose des téléchargements gratuits de machines virtuelles avec des versions d'IE vers IE8, ainsi que Edge. Vous pouvez également installer sur la machine virtuelle une ancienne version d'un navigateur sans prise en charge de Grid. Par exemple en obtenant une copie de Firefox 51 ou inférieur. Après avoir installé votre ancien Firefox, assurez-vous de désactiver les mises à jour automatiques comme expliqué ici, sinon il se mettra à jour tranquillement !

Vous pouvez ensuite tester votre site dans IE11 et dans Firefox non supporté sur une VM (une solution beaucoup moins fragile que les valeurs mal orthographiées). La configuration peut vous prendre environ une heure, mais vous serez alors dans un très bon endroit pour tester vos replis.

Désapprendre les vieilles habitudes

"C'était la première fois que j'utilisais Grid Layout, il y avait donc beaucoup de concepts à apprendre et de propriétés à comprendre. Conceptuellement, j'ai trouvé la chose la plus difficile à désapprendre tout ce que j'avais fait pendant des années, comme nettoyer les flotteurs et tout emballer dans des conteneurs divs.

— Hidde travaille sur hiddedevries.nl/en

De nombreuses personnes ayant répondu à l'enquête ont mentionné la nécessité de désapprendre les vieilles habitudes et comment l'apprentissage de la mise en page serait plus facile pour les personnes complètement novices en CSS. J'ai tendance à être d'accord. Lorsqu'ils enseignent aux gens en personne, les débutants complets ont peu de problèmes à utiliser Grid tandis que les développeurs expérimentés s'efforcent de ramener la grille à une méthode de mise en page unidimensionnelle. J'ai vu des tentatives de "systèmes de grille" utilisant CSS Grid qui rajoute dans la rangée les wrappers nécessaires pour une grille flottante ou flexible.

N'ayez pas peur d'essayer de nouvelles techniques . Si vous avez la possibilité de tester dans quelques navigateurs et de rester conscient des problèmes potentiels d'accessibilité, vous ne pouvez vraiment pas vous tromper. Et, si vous trouvez un excellent moyen de créer un certain motif, faites-le savoir à tout le monde. Nous sommes tous nouveaux dans l'utilisation de Grid en production, il y a donc certainement beaucoup à découvrir et à partager.

«Grid Layout est le développement CSS le plus excitant depuis les requêtes multimédias. Il a été si bien pensé pour les besoins réels des développeurs et c'est un plaisir absolu à utiliser en production - pour les concepteurs et les développeurs.

— Trys Mudford travaillant sur trysmudford.com

Pour conclure, voici une très courte liste des meilleures pratiques actuelles ! Si vous avez découvert des choses qui fonctionnent ou ne fonctionnent pas bien dans votre propre situation, ajoutez-les aux commentaires.

1. Soyez très conscient de la possibilité de réorganiser le contenu. Vérifiez que vous n'avez pas déconnecté le visuel de la commande de document.
2. Testez en utilisant de vrais navigateurs cibles avec une machine virtuelle locale ou distante.
3. N'oubliez pas que les anciennes méthodes de mise en page sont toujours valables et utiles. Essayez différentes façons de réaliser des motifs. Ne vous attardez pas à devoir utiliser Grid.
4. Sachez qu'en tant que développeur front-end expérimenté, vous avez probablement toute une série d'idées préconçues sur le fonctionnement de la mise en page. Essayez de revoir ces nouvelles méthodes plutôt que de les forcer à revenir à d'anciens schémas.
5. Continuez à essayer des choses. Nous sommes tous nouveaux dans ce domaine. Testez votre travail et partagez ce que vous découvrez.