2

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>
Skate to Eat
  • 2,554
  • 5
  • 21
  • 53
  • 1
    I made a snippet for you. Please add your full css so we can work on it. – doğukan Jun 28 '20 at 13:17
  • Are you set on making the Grid yourself in order to learn the basics behind a Grid, or is there any other reason why you're not allowing yourself to use either Flexbox or Bootstrap? These tools make Grids a worry of the past. – Martin Jun 28 '20 at 14:38
  • 1
    @dgknca added! @ Martin I found it easier and more flexible to use Grid than Flexbox or Bootstrap for myself. – Skate to Eat Jun 28 '20 at 18:25
  • Does this answer your question? [Last margin / padding collapsing in flexbox / grid layout](https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout) – mfluehr Apr 19 '21 at 15:24

1 Answers1

4

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415