Avoid overlapping of elements with same grid-area

Question

It would be awesome if there is a hack that will enable rendering elements, with the same grid-area attr, in a stack. I know that the default functionality of css-grid is to overlap them, I am just looking for a hack.

For example:

<div class="grid">
  <div class="header">header</div>
  <div class="paragraph">p1</div>
  <div class="paragraph">p2</div>
  <div class="paragraph">p3</div>
  <div class="paragraph">p4</div>
  <div class="footer">footer</div>
</div>

I am looking for a solution that:
1. Will NOT use nesting. i.e Wrap all paragraphs into a another div and point that div to a grid-area
2. Will NOT increase grid-area-rows and will not require pointing each and every element to a new grid-area

Is this even possible?

Example here: https://codepen.io/stavros-liaskos/pen/WPdLoJ?editors=1100

Answer 1

Here I changed your code and may help to do it

Codepen

.grid {
  display: grid;
  grid-template-columns:  1fr,1fr;
}

.header {
  grid-column: 1/4;
  background: red;
}

.paragraph {
  grid-column: 1/3;
  background: yellow;
}

.slider {
  grid-column: 3/4;
  background: gray;
}

.footer {
  grid-column: 1/4;
  background: green;
}