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
Here I changed your code and may help to do it
.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;
}