我正在尝试从 leetcode 的个人资料页面复制日历功能，如下所示。
[\[calendar feature from leetcode\](https://i.stack.imgur.com/OMUSJ.jpg)][1]
它是用 svg 完成的，因此响应部分是本质上处理的。我挑战自己只使用 css 复制它，但到目前为止，这还不是一个成功的挑战。
如果您点击此链接，您将看到我的最佳尝试。
您会注意到日历中的日期之间的间隙不一致。 对于某些视口宽度，它似乎在整个网格中保持一致，但并非所有视口宽度都是一致的。无论我将固定值还是自适应值作为间隙，情况都是如此。事实上，我尝试将间隙设置为固定单位，但“.day”元素仍然被间隙压扁，间隙看起来比应有的要大。对于水平和垂直间隙来说都是如此。
此外，我确实尝试使用浮动边距和内联块复制布局，但问题仍然存在。这有点正常，因为我只使用 flex:none 。然而，这种行为仍然以同样的方式发生。我不明白为什么有些盒子的宽度会减小，而旁边的间隙会增大。我想我对自由空间分布的理解在某种程度上是缺乏的。
我并不是真的指望 Flex 来完成响应部分，而是指望单元。这是因为我不知道如何利用 Flexbox 来控制 .day 在这种情况下的尺寸。
.day 元素的尺寸似乎是由我写的其他内容强制的，但我不知道是什么，因为 即使没有间隙，它们也会显得不均匀。浏览器报告的尺寸看起来相等，但从视觉上看，它们并不相等。
你能发现我的知识差距在哪里吗？ 是否可以在不大量使用媒体查询的情况下实现这样的目标？
尽管我正在使用这些单位，但我还没有研究容器查询。我还没有掌握它们。请注意，即使使用固定单位，问题仍然存在。
这应该是一条挖掘路线吗？
我很想就我所缺少的内容获得一些反馈。
我在你的日间课程中添加了 margin:2px ，这使得间隙保持一致。