Single row grid container with unknown number of children and pre-specified number of columns overflowing

Joe MC 0
Viewed 39

I'm trying to create something similar to the netflix slider. Right now, I have a single row grid container with overflow set to auto and I want to have 5 columns showing at any point in time. I'm using javascript to dynamically calculate the width of the container so that I can smoothly scroll through the items using navigation buttons as well as free scroll using trackpad (or touchpad). However, I'm having trouble getting the grid container to align perfectly, and the grid-gap property is messing up the alignment of the children within the grid container. Just to show you a short snippet of my code right now:

.container{
  display: grid;
  grid-gap: 0.75rem;
  grid-auto-flow: column;
  grid-auto-columns: 20%;
  overflow: auto;
}
.child {
 display: flex;
 background: red;
 height: 150px;
}
<div class="container">
  <div class="child">
    card 1
  </div>
  <div class="child">
    card 2
  </div>
  <div class="child">
    card 3
  </div>
  <div class="child">
    card 4
  </div>
  <div class="child">
    card 5
  </div>
  <div class="child">
    card 6
  </div>
  <div class="child">
    card 7
  </div>
  <div class="child">
    card 8
  </div>
  <div class="child">
    card 9
  </div>
  <div class="child">
    card 10
  </div>
</div>

As you can see, the fifth column in view always overflows. I know this is an issue with percentage based values not taking into account the grid-gap, and I know that I should be using the fr unit to avoid this problem, but obviously I can't use fr because I don't have a fixed number of children. The number of children is supposed to be unknown. I have tried hacking it by removing the grid-gap and giving each child a margin instead, and then using the pseudo class nth-child(5n) to remove the extra right margin from the last child in view, but that introduces a whole new problem where when you free scroll through the items, there would be no gap between every 5th and 6th child. Is there a proper way to do this that is not janky.

I've spent a couple of hours fiddling with it and looking for a solution online, with no luck. I'd appreciate any help. Thanks in advance.

css-grid css html
1 Answers

Use calc(). You have to deduct 4 gaps and divide it between 5 elements =>

4 * 0.75 / 5 = 0.6

=>

  grid-gap: 0.75rem;
  grid-auto-columns: calc(20% - 0.6rem);

Demo:

.container {
  display: grid;
  grid-gap: 0.75rem;
  grid-auto-flow: column;
  grid-auto-columns: calc(20% - 0.6rem);
  overflow: auto;
}
.child {
  display: flex;
  background: red;
  height: 150px;
}
<div class="container">
  <div class="child">
    card 1
  </div>
  <div class="child">
    card 2
  </div>
  <div class="child">
    card 3
  </div>
  <div class="child">
    card 4
  </div>
  <div class="child">
    card 5
  </div>
  <div class="child">
    card 6
  </div>
  <div class="child">
    card 7
  </div>
  <div class="child">
    card 8
  </div>
  <div class="child">
    card 9
  </div>
  <div class="child">
    card 10
  </div>
</div>

Dynamically:


.container {
  --gap: 0.75rem;
  --items: 6;
  display: grid;
  grid-gap: var(--gap);
  grid-auto-flow: column;
  grid-auto-columns: calc(
    100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items)
  );
  overflow: auto;
}

Now change the value of --items and --gap.

And let's add responsiveness:

.container {
  --gap: 0.75rem;
  --items: 2;
  display: grid;
  grid-gap: var(--gap);
  grid-auto-flow: column;
  grid-auto-columns: calc(
    100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items)
  );
  overflow: auto;
}
.child {
  display: flex;
  background: red;
  height: 150px;
}
@media (min-width: 540px) {
  .container { --items: 3 }
}
@media (min-width: 768px) {
  .container { --items: 4 }
}
@media (min-width: 992px) {
  .container { --items: 5 }
}
@media (min-width: 1200px) {
  .container { --items: 6 }
}
@media (min-width: 1500px) {
  .container { --items: 8 }
}
<div class="container">
  <div class="child">
    card 1
  </div>
  <div class="child">
    card 2
  </div>
  <div class="child">
    card 3
  </div>
  <div class="child">
    card 4
  </div>
  <div class="child">
    card 5
  </div>
  <div class="child">
    card 6
  </div>
  <div class="child">
    card 7
  </div>
  <div class="child">
    card 8
  </div>
  <div class="child">
    card 9
  </div>
  <div class="child">
    card 10
  </div>
</div>

userx8W70
Related