Как стилизовать разрыв между автоматически подгоняемыми (или автоматически заполняющимися) строками?

Question

Скажем, цель состоит в том, чтобы создать макет типа книжной полки, в котором количество книг в строке равно размеру экрана.

Однако теперь я хочу установить нижнюю границу или изображениедля представления книжной полки внизу (либо с помощью border-image-slice для получения внешнего вида с книжными концами, либо с помощью img)

Как это можно сделать с помощью css-grid или внутри содержимого сетки?

Вот пример типа эффекта, который мне нужен: https://codepen.io/TheRolf/pen/LVqEbZ

Однако я бы предпочел использовать css-grid (а коричневая «полка» должна быть изображением, или использоватьграницы изображения).

Решением здесь может быть расширение Горизонтальная граница всей строки CSS GRID

Вот начальная настройка, где синие квадраты представляют книги ... Iне пытался добавить часть книжной полки, потому что вот где я запутался:)

.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>