Избегайте перекрытия элементов с одинаковой площадью сетки

Question

Было бы замечательно, если бы был хак, который включил бы рендеринг элементов с одинаковым атрибутом области сетки в стеке.Я знаю, что стандартная функциональность css-grid состоит в том, чтобы перекрывать их, я просто ищу взлом.

Например:

<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>

Я ищу решение, которое:
1. НЕ будет использовать вложенность.т.е. обернуть все абзацы в другой div и указать, что div - область-сетки
2. НЕ будет увеличивать строки-области-сетки и не потребует указания каждого элемента на новую область-сетки

Возможно ли это вообще?

Пример здесь: https://codepen.io/stavros-liaskos/pen/WPdLoJ?editors=1100

Answer 1

Здесь я изменил ваш код и могу помочь сделать это

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;
}