Jag har inte arbetat så mycket med CSS Grid ännu och det här verkade vara ett bra tillfälle att testa det. För min kalender flyttade jag datumen till ett pseudoelement som använder counter() för att öka dem automatiskt, så att jag kunde tillåta att innehåll skrevs inuti varje datum utan att behöva ha ytterligare element för att separera dem.

Jag gjorde också Grid-förskjutningen till en CSS-variabel så att det var lättare att återanvända samma kod för fler månader, och använde lite enkel vanilla JS för att applicera en extra klass på dagens datum så att det visas upp lite mer.

Men som sagt… jag är ny på Grid och den största ”oopsie” jag stöter på är hur Grid kollapsar på mindre skärmar.

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

Det ser bra ut på skrivbordet, men när man väl kommer till en viss brytpunkt blir de faktiska kalenderelementen föremål för de fruktade CSS-flödesproblemen. Jag har försökt justera wrapper-elementet för att ange en maximal bredd, men det verkar inte lösa problemet. Är detta en Grid-grej som någon kan upplysa en nybörjare om, eller är det något jag bara missar?