How do I prevent overlap of rows CSS grid?

I just started working with css grids. I am trying to read a pdf in web browser where each page is rendered in a new canvas element. Canvas elements are added dynamically depending upon the number of pages in the pdf file. I am using grid display, but the different pages (canvas elements) come out overlapped, as shown here: overlapped messed up rows

Here is my 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>

And here is the corresponding 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;
}

If I don't use the grid display for the pdfHolder element, it comes out fine (scrolling list of 8 canvas elements one after the other). If I add grid-auto-rows: 1100px; i.e. explicitly setting row height, it works. But now I see a big gap between the canvas elements: big gap

I doubt if it will work everytime (e.g. on a different screen etc, or with another pdf with a different page size etc.). Is there a way to implicitly set the row height depending upon the canvas height?