Todavía no he trabajado mucho con CSS Grid y esto me pareció una gran oportunidad para probarlo. Para mi Calendario trasladé las fechas a un pseudoelemento que utiliza counter() para incrementarlas automáticamente, de forma que pudiera permitir que se escribiera contenido dentro de cada fecha sin tener que tener también elementos adicionales para separarlas.

También hice que el desplazamiento de la Rejilla fuera una variable CSS para que fuera más fácil reutilizar el mismo código para más meses, y utilicé un poco de simple vanilla JS para aplicar una clase extra a la fecha de hoy para que se mostrara un poco más.

Pero como he dicho… soy nuevo en Grid y el mayor ‘oopsie’ que sigo encontrando es cómo el Grid se colapsa en las pantallas más pequeñas.

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

Se ve muy bien en el escritorio, pero una vez que llegas a un cierto punto de ruptura los elementos reales del calendario se someten a los temidos problemas de flujo CSS. He intentado ajustar el elemento wrapper para especificar un ancho máximo, pero eso no parece resolver el problema. Así que, ¿es esto una cosa de Grid que alguien podría iluminar a un novato, o simplemente me estoy perdiendo algo?