Ainda não fiz muito trabalho com o CSS Grid e isto pareceu-me uma grande oportunidade para o testar. Para o meu Calendário eu movi as datas para um pseudo elemento que usa counter() para incrementá-las automaticamente, para que eu pudesse permitir que o conteúdo fosse escrito dentro de cada data sem também ter que ter elementos adicionais para separá-las.

Eu também fiz o offset do Grid uma variável CSS para que fosse mais fácil re-utilizar o mesmo código por mais meses, e usei um pouco de baunilha simples JS para aplicar uma classe extra para a data de hoje, para que ela seja mostrada um pouco mais.

Mas como eu disse… Eu sou novo no Grid e o maior ‘oopsie’ que eu continuo encontrando é como o Grid colapsa em telas menores.

Fica ótimo na área de trabalho, mas uma vez que você atinge um certo ponto de quebra, os elementos do calendário real ficam sujeitos aos temidos problemas de fluxo do CSS. Eu tentei ajustar o elemento wrapper para especificar uma largura máxima, mas isso não parece resolver o problema. Então isto é uma coisa de Grid para a qual alguém poderia iluminar um novato, ou estou apenas a perder algo?