CSS 网格填充在水平滚动的最后一个元素上，网格自动流动 : column;

Question

右侧的填充不会显示在最后一项的右侧。我如何让它像第一个元素的左侧一样显示。

第一个元素的左侧填充

在最后一个元素上向右填充(有右侧填充，但它没有在最后一个元素的右侧留出空间

.Container {
  max-width: 800px;
  margin: 0 auto;
}

.book-list {
  overflow: scroll;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 8px;
  padding: 0 8px 16px 8px;
}

.book-list div{
  width: 100px;
  height: 140px;
  border: 1px solid #333;
}

<div class="Container book-list" }>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
</div>

Answer 1

额外的空元素可以解决这个问题:

.Container {
  max-width: 800px;
  margin: 0 auto;
}

.book-list {
  overflow: scroll;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 8px;
  padding: 0 8px 16px 8px;
}
/* the fix */
.book-list::after {
  content:"";
  width:1px;
  margin-right:-1px;
}
/**/
.book-list div{
  width: 100px;
  height: 140px;
  border: 1px solid #333;
}

body {
 margin:0;
}

<div class="Container book-list" >
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
  <div>
    <span>Book Name</span>
  </div>
  <div>
    <span>Book 1</span>
  </div>
</div>