CSS 网格填充在水平滚动的最后一个项目上，使用 grid-auto-flow: 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>