Just to give another example (and to keep this conversation going). Here is something that I wrote as a hack work around.
```css
.named-grid {
display: grid;
grid-template-columns: 100px 1fr 5px 100px 2fr;
}
.c1 {
grid-column: 1/2;
}
```
I did this a couple more times because I had more columns but this displays my point.
This (when the child objects are classed corrected) haves a gap of 0px then 5px as a repeating pattern.
What I am proposing instead in the following
```css
.named-grid {
display: grid;
grid-template-columns: 100px 1fr 100px 2fr;
grid-column-gap: 0px 5px;
}
```
Sebastian
I was thinking of something along the lines(not exactly a pattern to repeat) because I couldn't find a way to do variable grid gaps.
Use case - having different gap between cells at different rows.
Example - Building a macbook pro keyboard layout with CSS. The top function keys row has narrower grid gap than the other keys beneath it.
I'll be able to reply with much more detailed explanatiom when I am on a laptop.