En ole vielä tehnyt paljon töitä CSS Gridin kanssa, ja tämä tuntui hyvältä tilaisuudelta testata sitä. Kalenterissani siirsin päivämäärät pseudoelementtiin, joka käyttää counter()-elementtiä kasvattaakseen niitä automaattisesti, jotta voisin sallia sisällön kirjoittamisen kunkin päivämäärän sisälle ilman, että tarvitsisin ylimääräisiä elementtejä erottamaan ne toisistaan.

Sain myös Gridin offsetin CSS-muuttujaksi, jotta samaa koodia olisi helpompi käyttää uudelleen useammalle kuukaudelle, ja käytin hiukan yksinkertaista vanilla-JS:ää soveltaakseni lisäluokitusta tämänpäiväiseen päivämäärään niin, että se on esillä hiukan näkyvämmin.

Mutta kuten sanoin… Olen uusi Grid ja suurin ”oopsie” pidän törmätä on, miten Grid romahtaa pienemmillä näytöillä.

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

Näyttää hyvältä työpöydällä, mutta kun saavutat tietyn katkaisupisteen varsinainen kalenteri elementit altistuvat pelätty CSS virtaus kysymyksiä. Olen yrittänyt säätää wrapper-elementtiä määrittelemään maksimileveyden, mutta se ei näytä ratkaisevan ongelmaa. Onko tämä siis Grid-asia, jota joku voisi valaista aloittelijalle, vai onko minulta vain jäänyt jotain huomaamatta?