Je n’ai pas encore beaucoup travaillé avec CSS Grid et cela semblait être une excellente occasion de le tester. Pour mon Calendrier, j’ai déplacé les dates dans un pseudo-élément qui utilise counter() pour les incrémenter automatiquement, de sorte que je puisse permettre au contenu d’être écrit à l’intérieur de chaque date sans avoir également des éléments supplémentaires pour les séparer.

J’ai également fait du décalage de la Grille une variable CSS afin qu’il soit plus facile de réutiliser le même code pour plus de mois, et j’ai utilisé un peu de simple vanilla JS pour appliquer une classe supplémentaire à la date d’aujourd’hui afin qu’elle soit mise en valeur un peu plus.

Mais comme je l’ai dit… Je suis nouveau dans la Grille et le plus grand ‘oopsie’ que je continue à rencontrer est la façon dont la Grille s’effondre sur les plus petits écrans.

https://codepen.io/rkieru/pen/JjROdEe

C’est super sur le bureau, mais une fois que vous atteignez un certain point de rupture, les éléments de calendrier réels deviennent sujets aux redoutables problèmes de flux CSS. J’ai essayé d’ajuster l’élément wrapper pour spécifier une largeur maximale, mais cela ne semble pas résoudre le problème. S’agit-il d’un problème de grille que quelqu’un pourrait éclairer pour un débutant, ou est-ce que je rate quelque chose ?