Non ho ancora fatto molto lavoro con CSS Grid e questa sembrava una grande opportunità per testarlo. Per il mio calendario ho spostato le date in uno pseudo elemento che usa counter() per incrementarle automaticamente, in modo da poter permettere di scrivere contenuti all’interno di ogni data senza dover avere elementi aggiuntivi per separarli.

Ho anche reso l’offset della griglia una variabile CSS in modo che fosse più facile riproporre lo stesso codice per più mesi, e ho usato un po’ di semplice vanilla JS per applicare una classe extra alla data di oggi in modo da metterla un po’ più in mostra.

Ma come ho detto… sono nuovo di Grid e il più grande ‘oopsie’ in cui continuo a imbattermi è come la griglia collassa sugli schermi più piccoli.

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

Sembra ottimo su desktop, ma una volta raggiunto un certo punto di rottura gli elementi del calendario effettivo diventano soggetti ai temuti problemi di flusso CSS. Ho provato a regolare l’elemento wrapper per specificare una larghezza massima, ma questo non sembra risolvere il problema. Quindi è una cosa di Grid che qualcuno potrebbe illuminare un principiante, o mi manca qualcosa?