Comment créer une mise en page de carte à l'aide de CSS Grid Layout

Note de l'éditeur : cet article invité a été écrit par Abbey Fitzgerald, ingénieur logiciel UX et concepteur Web qui aime l'art de créer du code.

Les mises en page de grille CSS changent la façon dont les concepteurs Web travaillent, permettant une manière plus efficace de mettre en page le contenu du site Web.

Elle était attendue depuis longtemps, mais finalement cette approche a vraiment pris son envol, et dans de nombreux cas, elle est en production. Il a révolutionné la façon dont les sites Web sont conçus et une fois que les concepteurs auront compris, cela donnera plus de flexibilité aux mises en page Web.

Si vous avez essayé de concevoir avec CSS Grid et que vous avez consulté des didacticiels sur le Web, vous avez peut-être trouvé des informations relatives à une approche de mise en page globale. Des choses comme : en-tête, contenu, pied de page, etc.

Cependant, CSS Grid peut également être utile pour d'autres détails de site Web, tels que les cartes. Les mises en page de cartes sont un moyen courant d'afficher du contenu, et elles peuvent être créées efficacement avec CSS Grid. En utilisant cette méthode, les zones de contenu de la carte sont facilement reproductibles, peuvent être visualisées sur de nombreux types d'appareils différents et la taille est facilement contrôlée.

Outils de mise en page de grille CSS

Au fur et à mesure que vous avancez, vous voudrez inspecter les éléments de la page. Firefox dispose d'excellents outils de développement pour voir les zones de la grille. À l'aide des outils de développement de Firefox, vous pouvez voir une superposition qui décrit la grille. Firefox Developer Edition a également cette capacité.

Sélectionnez la grille de superposition que vous souhaitez afficher (selon votre conception, il peut y en avoir plusieurs). Les paramètres d'affichage de la grille vous permettent de regarder de plus près en affichant le numéro de ligne, les noms de zone et la façon dont vous souhaitez que les lignes s'étendent. Cela vous sera utile lors de la conception.

Cartes simples avec disposition en grille CSS

Si vous débutez avec CSS Grid, vous voudrez approfondir les bases et créer une mise en page de grille CSS simple. Les cartes sont un excellent moyen d'afficher du contenu, ainsi qu'un élément d'interface utilisateur intéressant et intuitif à utiliser. Elles offrent également un excellent format aux utilisateurs pour numériser rapidement le contenu et interagir avec ce qui les intéresse le plus. Les cartes permettent également aux concepteurs de formater le contenu de manière visuellement attrayante, avec de superbes images, du contenu d'introduction, des liens et bien plus encore !

Cartes et mise en page globale

En aparté, il est important de savoir que CSS Grid n'a pas besoin d'être utilisé sur une mise en page entière. Des grilles peuvent être utilisées dans certaines zones de la page si nécessaire. Puisqu'il s'agit d'un didacticiel sur les dispositions de cartes, une approche de grille peut être utilisée exclusivement ici même si le reste de la page n'utilise pas CSS Grid. Tant que la zone de la grille est définie et display: grid; est déclaré sur le wrapper, cette approche peut être utilisée.

Travailler avec un nombre défini de cartes

Dans certains cas, il est facile de prévoir un nombre défini de cartes. Avec une quantité de contenu définie, le nombre de cartes restera le même. Par exemple, il peut y avoir quatre cartes qui expliquent les offres commerciales, chaque offre sur sa propre carte.

Pour cet exemple (et les autres), tous les éléments .card sont à l'intérieur d'un élément conteneur .cards . Pour y parvenir, c'est assez simple.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

Il est important d'afficher la valeur de .cards sur la grille. Sans cela, les zones de grille ne peuvent pas être créées. L'étape suivante consiste à définir les grid-template-columns et à choisir le style. Le style de carte réel sera déclaré avec une classe de .card .

Dans cet exemple, vous verrez plusieurs balises d'article avec la classe .card . A voir sur Codepen.

Répétez pour définir le nombre de cartes

C'est là que les cartes commencent à prendre forme. Pour créer une quantité fluide de colonnes par ligne, repeat est utilisé avec la fonction repeat() . Cette fonction prend deux arguments : le nombre de fois à répéter et la valeur à répéter.

Par exemple, grid-template-columns: repeat(3, 200px); calcule en grid-template-columns: 200px 200px 200px; .

Unité fractionnaire

Vous verrez que l'exemple de code utilise un "fr." Qu'est-ce que c'est exactement ? Cette unité de mesure est devenue populaire avec CSS Grid. Fr signifie « unité fractionnaire » et 1fr occupe 1 partie de l'espace disponible. Il permet de simplifier les calculs d'espace.

Les unités fractionnaires peuvent être utilisées seules ou elles vous permettent de spécifier une largeur de 1fr et vous pouvez également ajouter des éléments enfants. Plusieurs fr seront également partagés entre tous les éléments enfants.

Différentes unités fractionnaires peuvent être spécifiées. Par exemple, lorsque les colonnes de la grille sont 1fr 2fr 1fr , deux unités fractionnaires occupent deux fois plus d'espace qu'une unité fractionnaire.

Répétez l'opération pour un nombre dynamique de cartes

Dans certains cas, vous ne connaissez peut-être pas le nombre de cartes nécessaires, donc la planification d'un nombre défini ne fonctionnera pas. La même approche sera adoptée que pour la répétition, mais il est possible d'en adapter autant que nécessaire avec le remplissage automatique.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Les déclarations de largeur sont nécessaires en plus du auto-fill . Gardez à l'esprit qu'avec une valeur px, il peut y avoir un espace à droite lorsqu'il n'y a pas assez pour que la carte rentre, mais cela n'a pas à être le cas, comme vous le verrez un peu plus tard.

Minmax pour plus de contrôle sur la largeur de la carte

Minmax est la solution parfaite, car une unité fractionnaire à elle seule rendrait les cartes pleine largeur. L'ajout à la fois de répétition et d'un minmax à la déclaration de style éliminera l'espace vide possible et les cartes apparaîtront plus fluides.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Les colonnes s'adapteront toujours à la grille et les cartes feront au moins 200px. Lorsque l'espace minimum ne correspond pas parfaitement à l'espace, c'est là que la largeur maximum entre en jeu. Lorsqu'une autre carte de 200 pixels de largeur ne rentre pas, les autres cartes seront plus grandes que 200 pixels, elles s'étirent donc pour remplir la ligne avec plus d'espace et elles seront réparties de manière égale. [article id = »21612″ align = »right »]

Mobile

Puisque les cartes les plus petites et les plus grandes ont été prévues, c'est le bon moment pour parler de mobile. Les cartes fonctionnent bien sur les appareils plus grands et plus petits car le contenu est en morceaux digestibles, et les cartes peuvent facilement évoluer vers le haut et vers le bas. CSS Grid aide à créer une excellente expérience mobile et, dans certains cas, c'est beaucoup plus facile que d'avoir une requête multimédia distincte.

Dans cet exemple, les cartes doivent être réduites pour s'adapter au mobile et agrandies pour ne représenter qu'une fraction de l'espace disponible, de sorte qu'elles apparaissent en pleine largeur sur un appareil plus petit, aucune requête multimédia distincte n'est nécessaire :

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

La largeur minimale de la carte est de 300px. Autant de cartes de 300 pixels pouvant tenir apparaîtront dans la rangée. Lorsque l'appareil est très petit, il y a de fortes chances qu'il n'y ait pas l'espace disponible pour deux cartes à la suite. C'est alors que le 1fr entre en jeu. L'unité fractionnaire est idéale pour les conceptions réactives. Lorsque deux des cartes de 300 pixels ne rentrent pas, c'est là que la vue mobile devient très apparente. Lorsque 1fr a été déclaré comme largeur maximale, une seule carte occupera tout l'espace disponible et elles s'empileront les unes sur les autres.

Écart de grille

Maintenant que la largeur des cartes est établie, la décision d'avoir de l'espace entre elles doit être prise. Cette propriété est disponible sur les conteneurs de grille et facilite la création de gouttières dans la conception. Grid-column-gap crée l'espace entre chaque carte. Lorsque vous voyez grid-gap , cela fait référence au raccourci pour grid-row-gap et grid-column-gap . Grid-row-gap est l'espace en haut et en bas de la carte, grid-column-gap est l'espace à gauche et à droite de la carte.

Ressources de mise en page de la grille CSS

En ce qui concerne les mises en page de grille CSS, il y a beaucoup à apprendre et il existe de nombreuses possibilités. La meilleure façon d'en savoir plus sur CSS Grid Layout est de faire quelques lectures et expérimentations supplémentaires. Il existe de nombreuses ressources intéressantes, mais en voici quelques-unes pour vous aider à démarrer :

• Grille par exemple
• Cours CSS Grid Layout de Wes Bos
• Introduction de Mozilla à la grille CSS