CSS Grid padding right on the last item on horizontal scrolling with grid-auto-flow: column;

user_7724980 0
Viewed 605

Padding on the right does not show up on the right side of the last item. How do I make it to show up like the left of the first item.

Padding left on the first item enter image description here

Padding right on the last item(padding right is there but it does not give space to the right on the last item enter image description here

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

css-grid css
1 Answers

an extra empty element can fix this:

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

user_86203330
Related