CSS Grid实现每行添加分隔边框（无需额外添加26个div）

直接通过CSS背景渐变即可实现，无需添加额外div元素，修改.events的样式如下：

.events {
  display: grid;
  grid-template-rows: repeat(26, 30px);
  border-radius: 5px;
  /* 用线性渐变模拟分隔线，叠加在原有背景上 */
  background: 
    linear-gradient(to bottom, transparent 29px, #000 29px, #000 30px) repeat-y,
    var(--calBgColor);
  background-size: 100% 30px;
}

原理说明 #

• 两层背景叠加：第一层是纵向重复的线性渐变，每个30px高度单元内，前29px保持透明，最后1px渲染为黑色（即分隔线），刚好对齐每行的底部；
• 第二层是你原本设置的日历背景色var(--calBgColor)，作为底层背景；
• background-size: 100% 30px确保渐变单元的高度和grid行高完全匹配。

可选调整 #

如果只需要在行与行之间添加分隔线（最后一行下方不显示），可以调整背景的起始位置和重复次数：

.events {
  display: grid;
  grid-template-rows: repeat(26, 30px);
  border-radius: 5px;
  background: 
    linear-gradient(to bottom, transparent 29px, #000 29px, #000 30px) repeat-y,
    var(--calBgColor);
  background-size: 100% 30px;
  background-position: 0 30px; /* 从第一行底部开始渲染分隔线 */
  background-repeat: repeat(25); /* 26行仅需25条行间分隔线 */
}

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