如何避免CSS Grid中动态生成的PDF canvas页面出现行重叠问题？

解决方案 #

你遇到的重叠和间隙问题可以通过调整grid的两个配置解决，不需要写死固定行高，适配不同尺寸的PDF页面：

1. 给grid容器明确指定单列布局
2. 自动行高设置为匹配内容尺寸，可通过row-gap控制页面间距

修改后的CSS代码如下：

.pdfHolder {
    display: grid;
    /* 明确单列布局 */
    grid-template-columns: 1fr;
    /* 行高自动适配内容高度 */
    grid-auto-rows: min-content;
    /* 可选：设置PDF页之间的间距，根据需要调整数值 */
    row-gap: 10px;
    min-width: 500px;
    background: #eee;
    padding: 10px;
    overflow: scroll;
    border: 1px solid black;
    margin-left: -1px;
}

.canvasPage {
    border: 1px solid black;
    /* 可选：如果需要canvas自适应容器宽度，避免横向滚动，可加下面这行 */
    width: 100%;
    height: auto;
}

原问题原因 #

• 之前没有指定grid-template-columns，grid默认的自动列规则可能导致多个canvas被挤到同一行，高度计算异常出现重叠
• 你之前写死grid-auto-rows: 1100px，远大于canvas本身1052px高度+2px边框的总高度，所以会出现多余间隙
• min-content会让每一行的高度刚好适配行内元素的实际高度，不管PDF页面是多大尺寸都能自动适配，不用手动修改行高数值

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