Add space before and after first and last grid items

Question

My question is identical to this question, but the given solution does not work.

Here is a codepen of what I\'m working with.

I\'ve tried two different approache

Answer 1

This is another one of those instances where flexbox may provide a simpler, easier and more effective solution that grid.

:root {
  --gap: 25px;
}

#c {
  display: flex;
  overflow-x: auto;
  height: 50px;
  border: solid red 1px;
}

.i {
  height: 25px;
  flex: 0 0 calc(calc(100% - calc(var(--gap) * 2)) / 1.5); /* fg, fs, fb */
}

#c::before {
  content: '';
  flex: 0 0 var(--gap);
}

.i {
  margin-right: 20px;
}

#c::after {
  content: '';
  flex: 0 0 calc(var(--gap) - 20px); /* gap less margin */
}

.i:nth-child(odd)  { background: skyblue; }
.i:nth-child(even) { background: pink; }
body               { margin: 0; }
*                  { box-sizing: border-box; }

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24

You may also want to consider a transparent border for start- and end-side spacing. Last margin / padding collapsing in flexbox / grid layout