How to achieve repeatable template-grid-areas behavior in display:grid with infinite/dynamic rows?

Question

Imagine situation

Desktop

a b c d e 
a b c d e
a b c d e 
...

Mobile

a b d
c c c
e e e

a b d
c c c
e e e

...

While having literally infinite divs in one container like :

<div>
<div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div><div class="e"></div>
<div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div><div class="e"></div>
<div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div><div class="e"></div>
...
</div>

I find it impossible to do this.

1. Can't use template-grid-areas since it does not support repeating, every next stack of divs would draw on same spot one above each other.

2. Can't use grid "order" attribute since its also absolute, and all next div stacks would draw above themselves.

3. grid-column + nth-child + grid-template-columns:1fr 1fr 1fr 1fr 1fr, have partial success since grid-column in this way works relative, and affect next stacks of divs, but that goes only for swapping items in first line or making item to spawn over more place. But grid-row has again absolute positioning and I cant define every nth div to go one row above, instead it will draw all nth divs on same spot on screen.

4. Somehow could not achieve this also with flex

5. Would be easy if I simply encapsulate every 5 divs in parent div and repeat that, but then I will lose table like behavior where columns have same width in rows below, and longer content would break table like graphic

6. I wanted to replace old tables with responsive graphic where I can swap row divs by need depending on resolution, any way to achieve that would be great.

My current solution is, to generate custom duplicate divs on needed locations and hide/show them depending on responsive css + grid-template-columns, which is really bad solution. This is also pretty simple use case, but what if I had to switch multiple divs in row between rows and columns.

Thanks for help.

Answer 1

Focusing on the mobile layout (the other one is easy), you only need to set grid-column: span for the C and E elements:

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-gap: 5px;
  grid-auto-flow: dense;
}

.container div {
  border: solid 1px red;
}

.c, .e {
    grid-column: span 3;
}

<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>