Grid布局日历应用中Task堆叠问题求助

你的问题核心是日期单元格内部缺少垂直布局规则，导致任务元素要么按默认流堆叠、要么因脱离文档流直接重叠，调整padding/margin无法从根源解决布局逻辑问题。以下是具体修复方案：

方法1：用Flex布局实现单元格内任务垂直排列 #

这是最简洁的方案，给每个日期单元格设置flex垂直排列，自动让任务上下分布：

/* 日历Grid容器保持原有设置 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

/* 修改日期单元格样式，添加内部flex布局 */
.date-cell {
  border: 1px solid #eee;
  padding: 8px;
  /* 关键设置：垂直方向flex布局 */
  display: flex;
  flex-direction: column;
  gap: 4px; /* 统一控制任务间距，比margin更稳定 */
  min-height: 80px; /* 给单元格设置最小高度，避免内容拥挤 */
}

/* 任务元素样式保持，移除绝对定位（如果有） */
.task {
  background: #42b983;
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  /* 务必移除position: absolute; 否则会脱离文档流导致堆叠 */
}

方法2：用Grid布局实现单元格内任务排列 #

如果想用Grid精确控制任务行高，可以给日期单元格设置内部Grid：

.date-cell {
  border: 1px solid #eee;
  padding: 8px;
  display: grid;
  /* 自动根据任务数量生成行，每行最小高度30px */
  grid-template-rows: repeat(auto-fit, minmax(30px, 1fr));
  gap: 4px;
  min-height: 80px;
}

关键注意点 #

• 检查你的.task元素是否设置了position: absolute，绝对定位会脱离文档流，无论怎么调margin/padding都会堆叠，必须移除或改为position: relative（不脱离流的定位）。
• 不要依赖margin控制任务间距，用gap属性更稳定，不会出现外边距折叠的问题。

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