CSS Grid布局实现日历应用时部分边框异常加粗问题求助

数据老陈

2026-10-2

问题根因

边框粗细不均是相邻网格单元格边框重叠导致的：每个单元格都设置了全方向1px边框，两个单元格相邻时边缘的边框会叠加为2px，视觉上就比单个边框更粗更深。

解决方案

给你两个常用的修复方案，按需选择即可：

方案1：利用网格间隙模拟边框（推荐，无兼容性问题）

修改CSS如下：

section {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px; /* 用网格间隙替代边框 */
    background-color: black; /* 间隙颜色即为边框颜色 */
}

section > div {
    /* 删除原有border配置 */
    background-color: white; /* 单元格背景覆盖容器底色，仅保留间隙作为边框 */
    padding: 10px;
    height: 100px;
}

该方案完全规避了边框重叠问题，渲染效果最稳定，即使浏览器缩放也不会出现异常。

方案2：调整边框重叠规则

如果需要保留原border属性的写法，可通过负边距让边框重叠，修改CSS如下：

section {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: hidden; /* 裁剪容器边缘多出来的边框 */
}

section > div {
    border: 1px solid black;
    margin: 0 -1px -1px 0; /* 让相邻边框叠加为1px */
    padding: 10px;
    height: 100px;
}