How to style the gap between auto-fit (or auto-fill) rows?

Question

Let's say the goal is to build a bookshelf type of layout where the number of books per row is as many as fit across the screen.

However, now I want to set a bottom-border or image to represent the bookshelf underneath (either using border-image-slice to achieve the look with book-ends, or img)

How can this be accomplished using css-grid, or within a grid's contents?

Here is an example of the type of effect I'm after: https://codepen.io/TheRolf/pen/LVqEbZ

However, I'd prefer it to use css-grid (and the brown "shelf" should be an image, or use border-image).

The solution here might be an extension of Horizontal border across entire row of CSS GRID

Here's a starter setup, where the blue squares represent the books... I did not attempt to add the bookshelf part since that's where I'm confused :)

.grid {
    display: grid;
    background-color: red; 
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    grid-auto-rows: minmax(154px, auto);
    justify-items: center;
    grid-gap: 10px;
    margin: 10px;
}

.grid-item {
    width: 205px;
    height: 154px;
    background-color: blue;
    color: white;
}

<div class="grid">
   <div class="grid-item">1</div>
   <div class="grid-item">2</div>
   <div class="grid-item">3</div>
   <div class="grid-item">4</div>
   <div class="grid-item">5</div>
   <div class="grid-item">6</div>
   <div class="grid-item">7</div>
   <div class="grid-item">8</div>
   <div class="grid-item">9</div>
   <div class="grid-item">10</div>
</div>