Nu am lucrat prea mult cu CSS Grid până acum și aceasta mi s-a părut o ocazie excelentă pentru a-l testa. Pentru calendarul meu, am mutat datele într-un pseudo-element care folosește counter() pentru a le incrementa automat, astfel încât să pot permite ca conținutul să fie scris în interiorul fiecărei date fără a fi nevoie și de elemente suplimentare pentru a le separa.

Am făcut, de asemenea, ca decalajul Grid să fie o variabilă CSS, astfel încât să fie mai ușor de refolosit același cod pentru mai multe luni, și am folosit un pic de JS simplu de vanilie pentru a aplica o clasă suplimentară la data de astăzi, astfel încât să fie pusă în evidență un pic mai mult.

Dar, așa cum am spus… sunt nou în Grid și cel mai mare „oopsie” de care mă tot lovesc este modul în care Grid-ul se prăbușește pe ecrane mai mici.

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

Apare grozav pe desktop, dar odată ce atingeți un anumit punct de întrerupere, elementele reale ale calendarului devin supuse temutei probleme de flux CSS. Am încercat să ajustez elementul wrapper pentru a specifica o lățime maximă, dar asta nu pare să rezolve problema. Deci, este aceasta o chestie Grid pe care cineva ar putea lumina un începător, sau pur și simplu îmi lipsește ceva?

.