Ik heb nog niet veel met CSS Grid gewerkt en dit leek me een mooie gelegenheid om het uit te testen. Voor mijn kalender heb ik de datums verplaatst naar een pseudo-element dat counter() gebruikt om ze automatisch te laten oplopen, zodat ik binnen elke datum inhoud kon schrijven zonder dat ik extra elementen nodig had om ze van elkaar te scheiden.

Ik heb ook van de Grid-offset een CSS-variabele gemaakt, zodat het makkelijker was om dezelfde code voor meer maanden te hergebruiken, en ik heb een beetje eenvoudige vanilla JS gebruikt om een extra klasse toe te passen op de datum van vandaag, zodat die wat meer in het oog springt.

Maar zoals ik al zei… ik ben nieuw met Grid en de grootste ‘oepsie’ die ik steeds tegenkom is hoe het Grid in elkaar klapt op kleinere schermen.

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

Het ziet er geweldig uit op desktop, maar zodra je een bepaald breekpunt bereikt, worden de eigenlijke kalenderelementen onderhevig aan de gevreesde CSS flow-problemen. Ik heb geprobeerd het wrapper element aan te passen om een maximale breedte te specificeren, maar dat lijkt het probleem niet op te lossen. Is dit een Grid ding dat iemand een newbie kan uitleggen, of mis ik gewoon iets?