Jeg har ikke arbejdet meget med CSS Grid endnu, og dette virkede som en god mulighed for at afprøve det. For min kalender flyttede jeg datoerne ind i et pseudo-element, der bruger counter() til at øge dem automatisk, så jeg kunne tillade, at der kunne skrives indhold inden for hver dato uden også at skulle have ekstra elementer til at adskille dem.

Jeg gjorde også Grid offset til en CSS-variabel, så det var lettere at genbruge den samme kode til flere måneder, og brugte lidt simpel vanilla JS til at anvende en ekstra klasse på dagens dato, så den bliver vist lidt mere frem.

Men som sagt… Jeg er ny med Grid, og den største “oopsie”, jeg bliver ved med at løbe ind i, er, hvordan Grid’et falder sammen på mindre skærme.

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

Det ser godt ud på skrivebordet, men når man rammer et vist breakpoint, bliver de faktiske kalenderelementer udsat for de frygtede CSS-flow-problemer. Jeg har prøvet at justere wrapper-elementet for at angive en maksimal bredde, men det synes ikke at løse problemet. Så er dette en Grid-ting, som nogen kan oplyse en nybegynder om, eller mangler jeg bare noget?