如何防止行 CSS 网格重叠？

Question

我刚开始使用 CSS 网格。我正在尝试在网络浏览器中阅读 pdf，其中每个页面都呈现在新的画布元素中。画布元素根据 pdf 文件中的页数动态添加。我正在使用网格显示，但不同的页面（画布元素）出现重叠，如下所示： overlapped messed up rows

这是我的 HTML：

<div class="pdfHolder" id="pdfHolder">
    <canvas id="cvsPg1" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg2" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg3" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg4" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg5" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg6" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg7" class="canvasPage" height="1052" width="743"></canvas>
    <canvas id="cvsPg8" class="canvasPage" height="1052" width="743"></canvas>
</div>

这里是对应的CSS：

.pdfHolder {
    display: grid;
    min-width: 500px;
    background: #eee;
    padding: 10px;
    overflow: scroll;
    border: 1px solid black;
    margin-left: -1px;
}

.canvasPage {
    border: 1px solid black;
}

如果我不为 pdfHolder 元素使用网格显示，它会很好（一个接一个地滚动 8 个画布元素的列表）。 如果我添加grid-auto-rows: 1100px;，即显式设置行高，它就可以工作。但是现在我看到画布元素之间有很大的差距：big gap

我怀疑它是否每次都能正常工作（例如，在不同的屏幕上等，或与另一个页面大小不同的 pdf 等）。有没有办法根据画布高度隐式设置行高？

Answer 1

你的画布有height="1052"你尝试使用grid-auto-rows: 1052px;或grid-auto-rows: max-content;和gap: 0;