S mřížkou CSS jsem zatím moc nepracoval a tohle mi přišlo jako skvělá příležitost ji vyzkoušet. Pro můj kalendář jsem přesunul data do pseudoelementu, který používá counter() pro jejich automatickou inkrementaci, takže jsem mohl umožnit psaní obsahu uvnitř každého data, aniž bych musel mít také další elementy pro jejich oddělení.

Z mřížky jsem také udělal proměnnou CSS, takže bylo snazší znovu použít stejný kód pro více měsíců, a použil jsem trochu jednoduchého vanilla JS, abych aplikoval extra třídu na dnešní datum, aby bylo trochu více vystaveno.

Ale jak jsem řekl… jsem v Gridu nováček a největší „oopsie“, na které neustále narážím, je to, jak se Grid na menších obrazovkách sbalí.

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

Na desktopu vypadá skvěle, ale jakmile dosáhnete určitého bodu zlomu, začnou vlastní prvky kalendáře podléhat obávaným problémům s tokem CSS. Zkoušel jsem upravit prvek wrapper tak, aby určoval maximální šířku, ale nezdá se, že by to problém vyřešilo. Je to tedy věc Gridu, kterou by mohl někdo nováčkovi osvětlit, nebo mi jen něco uniká?

.