CSS复刻LeetCode日历：间隙与列宽不均/挤压问题排查

核心问题：布局方案选错了 #

你之前用float、inline-block、自定义单位的思路，本质上是在用「流式布局」的逻辑去做固定7列的网格布局，这才是问题根源：

• 自定义百分比+calc的方式，会因为视口宽度无法被7列（含间隙）整除，导致浏览器做亚像素分配，出现间隙不均、元素挤压的视觉bug；
• inline-block自带的空格间隙、float的清浮动和宽度计算误差，都会放大这个问题；
• 所谓「浏览器报告尺寸一致但显示不同」，是浏览器亚像素渲染的锅——当元素宽度不是整数像素时，渲染引擎会做像素对齐/抗锯齿，视觉上就会出现不均，DOM尺寸统计的是理论值，和实际渲染的像素表现有差异。

无需大量Media Queries的实现方案：用CSS Grid #

CSS Grid就是为这种固定列数的网格场景设计的，完全可以做到自适应，不需要一堆媒体查询：

1. 给日历容器设置display: grid；
2. 用grid-template-columns: repeat(7, 1fr)强制7列平分容器宽度；
3. 用gap设置日期块之间的间隙，不管是固定值（比如4px）还是相对单位（比如2%），Grid都会自动处理宽度分配，不会出现挤压或间隙不均；
4. 日期块.day不需要手动设置宽度，Grid会自动分配轨道宽度，你只需要控制内部样式（比如背景色、圆角）即可。

示例核心代码：

.calendar-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px; /* 可根据需求调整 */
  width: 100%;
}

.day {
  aspect-ratio: 1 / 1; /* 保持方块比例 */
  border-radius: 2px;
  background-color: #eee;
}

这个方案会自动适配任何容器宽度，7列始终平分空间，间隙完全一致，不会出现挤压问题。

Container Queries是否值得尝试？ #

如果你的日历组件是嵌套在某个可变宽度的容器里（比如侧边栏、卡片），而不是直接占满视口，Container Queries确实有用——可以让日历根据父容器的宽度调整样式（比如缩小间隙、改变方块大小）。但如果只是实现和LeetCode一样的「视口自适应日历」，CSS Grid本身就足够解决问题，不需要额外依赖Container Queries。

内容的提问来源于stack exchange，提问作者allthecoolnamesaregone