Nie pracowałem jeszcze zbyt wiele z CSS Grid i wydawało mi się to świetną okazją do przetestowania go. Dla mojego kalendarza przeniosłem daty do pseudo elementu, który używa counter() do ich automatycznej inkrementacji, dzięki czemu mogłem pozwolić na pisanie treści wewnątrz każdej daty bez konieczności posiadania dodatkowych elementów do ich oddzielenia.

Uczyniłem także przesunięcie siatki zmienną CSS, aby łatwiej było ponownie wykorzystać ten sam kod dla większej ilości miesięcy, i użyłem trochę prostego waniliowego JS do zastosowania dodatkowej klasy do dzisiejszej daty, aby była ona nieco bardziej widoczna.

Ale tak jak mówiłem… Jestem nowy w Grid i największym 'oopsie’ na jakie wpadam jest to, jak Grid zapada się na mniejszych ekranach.

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

Wygląda świetnie na pulpicie, ale po osiągnięciu pewnego punktu załamania rzeczywiste elementy kalendarza stają się przedmiotem przerażających problemów z przepływem CSS. Próbowałem dostosować element wrapper, aby określić maksymalną szerokość, ale to nie rozwiązuje problemu. Więc czy jest to sprawa Grid, którą ktoś mógłby oświecić nowicjusza, czy też po prostu czegoś mi brakuje?