I’m trying to replicate the calendar feature from leetcode’s profile page, as it is hereafter.

        [[calendar feature from leetcode](https://i.sstatic.net/OMUSJ.jpg)][1]

It’s done with svg so the responsive part is handled intrinsically. I have challenged myself to replicate it just using css, and so far, it is not a successful challenge.

If you follow this link, you’ll see my best attempt at it.

You’ll notice that the gaps in between the days of the calendar are inconsistent.
For some viewport widths, it seems to be consistent throughout the grid not but for all of them. This is the case whether I put a fixed or adaptive value as gap. Indeed, I have tried to set the gaps as fixed units and the ‘.day’ element were still being squashed by the gaps which would then appear bigger than it should have. This is true for horizontal and vertical gaps.

Also, I did try to replicate the layout using floats margin and inline-blocks and the problem remains. This is somewhat normal as I’m only using flex:none. Yet, the behavior was still occuring the same way. I don’t understand why some boxes get their width reduced and the gaps next to them get theirs increased. I guess that my understanding of free space distribution is lacking in some way.

I’m not really counting on flex to do the responsive part but on the units. This is because I don’t see how I could leverage flexbox to rein the dimensions of .day in that context.

It seems the dimensions of the .day element are forced by something else I wrote but I don’t know what, as
even without gaps, they seem uneven. The dimensions reported by the browser seem equals, but visually, they are not.

Could you spot where is my knowledge gap?
Is it possible to achieve such thing without heavy uses of media queries?

I’m yet to study container queries even though I’m using the units. I did not master them yet. Note that even using fixed units, the problem remains.

Should it be a route to dig ?

I’d love to have some feedback on what I’m missing.