我正在尝试从 leetcode 的个人资料页面复制日历功能，如下所示。
[\[calendar feature from leetcode\](https://i.sstatic.net/OMUSJ.jpg)][1]
它是用 svg 完成的，因此响应部分是本质上处理的。我挑战自己只使用 css 复制它，但到目前为止，这还不是一个成功的挑战。
如果您点击此链接，您将看到我的最佳尝试。
您会注意到日历中的日期之间的间隙不一致。 对于某些视口宽度，它似乎在整个网格中保持一致，但并非所有视口宽度都是一致的。无论我将固定值还是自适应值作为间隙，情况都是如此。事实上，我尝试将间隙设置为固定单位，但“.day”元素仍然被间隙压扁，间隙看起来比应有的要大。对于水平和垂直间隙来说都是如此。
此外，我确实尝试使用浮动边距和内联块复制布局，但问题仍然存在。这有点正常，因为我只使用 flex:none 。然而，这种行为仍然以同样的方式发生。我不明白为什么有些盒子的宽度会减小，而旁边的间隙会增大。我想我对自由空间分布的理解在某种程度上是缺乏的。
我并不是真的指望 Flex 来完成响应部分，而是指望单元。这是因为我不知道如何利用 Flexbox 来控制 .day 在这种情况下的尺寸。
.day 元素的尺寸似乎是由我写的其他内容强制的，但我不知道是什么，因为 即使没有间隙，它们也会显得不均匀。浏览器报告的尺寸看起来相等，但从视觉上看，它们并不相等。
你能发现我的知识差距在哪里吗？ 是否可以在不大量使用媒体查询的情况下实现这样的目标？
尽管我正在使用这些单位，但我还没有研究容器查询。我还没有掌握它们。请注意，即使使用固定单位，问题仍然存在。
这应该是一条挖掘路线吗？
我很想就我所缺少的内容获得一些反馈。
我在你的日间课程中添加了 margin:2px ，这使得间隙保持一致。
我终于成功了，混合使用媒体查询、CSS 变量和 CSS 网格。我仍然不明白浏览器进行的计算是什么。
据我所知，在网格实例中应该是：nbOfColumnscolumnSize+gapSize(nbOfColumns-1)。
由于我使用的是固定单位，因此我确保在所有情况下，内容都拥有不拉伸列所需的所有空间。
但是，我注意到由于某些原因，将 4 的倍数设置为宽度适用于实际相等的列。根据间隙，我使用了这篇post中的技术并使用了边框技巧。
如果我不是懒得阅读如何使用 jsfiddle 链接包含代码的话，你可以看到它全部组合在一起。这么多的烦恼也许这行得通，知道域名是 jsfiddle。酷名saregone/dc8t61nb/4/
所以现在这个问题或多或少已经解决了。我真的很想了解为什么两个间隙不相等以及为什么列被压扁。这会帮助我更好地做到这一点。谁知道呢，7个月后我就能自己回答这个问题了。