CSS Grid Horizontal scroll, adding space before and after scrolled items

Question

I am using CSS grid to create a horizontal scroll for a list of card items. I am required to leave spacing at the first item of the list on the left, and the last item on the list on the right, when you have reached the end of the horizontal scroll. When scrolling through the middle of the list however, there should not be any spacing on the sides.

Requirements

Spacing on the start of the list of cards (on the left)
Spacing at the end of the list of cards (on the right)
The amount of cards shown must be 2.5 (on page load, show 2.5 cards to indicate that scrolling horizontally is availabale)
The number of items in the list can vary, so unable to use an explicit grid

Example of how it should look at the beginning of the list, with spacing on the left side:

Example of how it should look at the beginning of the list, with spacing on the left side

Example of how it's supposed to look when scrolling on the right, and what it is not supposed to look like on the left side:

Example of how it's supposed to look when scrolling on the right, and what it is not supposed to look like on the left side

Example of how it's supposed to look like at the end of the list, with spacing on the rightside:

Example of how it's supposed to look like at the end of the list, with spacing on the rightside

Here is a codepen on what I am trying to achieve.

I have tried using a ::before and ::after on the ol to try and fill in the empty space of the beginning and the end of the list, but it was met with weird results.

   ol {
  padding: 0;
  list-style: none;
  display: grid; 
  grid-auto-flow: column;
  grid-gap: 1rem;
  overflow-x: auto;
  grid-template-columns: 1rem repeat(auto-fill, calc((20rem - 2rem) / var(--visible-cards))) 1rem;
  margin-left: -1rem;
  margin-right: -1rem;

  &::before,
  &::after {
    content: '';
  }

  &::before {
    grid-column: 1;
    background: blue;
  }

  &::after {
    grid-column: -1;
    background: red;
  }

The ::after is not at the end of the list as I thought it would be by applying the grid-column: -1, but instead it is at the end of the visible area, before the horizontal scrolling begins. Does anyone know of a way to achieve the requirements? Thanks in advance if you do!!!

Applying `grid-column: -1` to an `::after` pseudo item won't do anything (except eclipse the `::before` item) because you're working with an *implicit* grid. Negative integer values in `grid-row` and `grid-column` properties only work with *explicit* grids ([more details](https://stackoverflow.com/a/44053668/3597276)). — Michael Benjamin, Jul 04 '18 at 13:46
Additional guidance: https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout — Michael Benjamin, Jul 04 '18 at 13:49

score 3 · Accepted Answer · answered Jan 26 '19 at 08:43

3

If anyone is interested in solving this, in the end I only used a ::after element to act as the space after all the li elements. You can see the updated codepen here: https://codepen.io/sammiepls/pen/qKwxBg

answered Jan 26 '19 at 08:43

sammiepls

1,340
2
13
19

doesnt work for me :/ for some reason it sets the `::before` pseudo content to the same size as a grid item, and `width` will only allow me to manipulate the `::after` pseudo content size? [codepen](https://codepen.io/tOkyO1/pen/gEKOYV) – oldboy Mar 17 '19 at 19:38
https://codepen.io/sammiepls/pen/drjzPx we only need the `::after`, I removed the `::before` and used padding – sammiepls Mar 19 '19 at 03:46
thats not quite what i was looking for, but i figured it out. [if ur interested heres my Q](https://stackoverflow.com/questions/55211520/add-space-before-and-after-first-and-last-grid-items) – oldboy Mar 19 '19 at 04:18
you may use display:flex on container and padding instead of width on ::after – Andrey Kudriavtsev Aug 18 '20 at 14:44

score 0 · Answer 2 · answered Jul 04 '18 at 05:18

0

Have you tried playing with the element:first-child to add a left margin and the element:last-child to add right margin?

As you are using OL-LI the code would be:

li:first-child {
  margin-left: 10px;
}
li:last-child {
  margin-right: 10px;
}

answered Jul 04 '18 at 05:18

Nitin Suri

960
1
8
20

Thanks for your suggestion! Unfortunately, I have and it does not seem to work on the last child when I add margin-left – sammiepls Jul 04 '18 at 05:53
Try adding !important, though this is not the best approach. – Nitin Suri Jul 04 '18 at 05:59
with `grid-auto-flow` and `auto-fill`, this will cause the first grid child to override `grid-gap`, so that the first and second grid children will be squished together... – oldboy Mar 17 '19 at 19:20

CSS Grid Horizontal scroll, adding space before and after scrolled items

2 Answers2

Linked