Using Grid to layer items over each other - css

Question

I am using absolute positioning to layer div one, two, three (and cover main). Would it be possible to achieve the same with CSS grid?
div.main is always displayed
div one, two, three will be shown when needed
Update: Toggle button added for better visualisation
const div = document.querySelector('div.content');
document.querySelector('button').addEventListener('click', () => {
const on = document.querySelector('.on');
on?.classList.remove('on');
(on?.nextElementSibling || div.firstElementChild).classList.add('on');
});
* {
box-sizing: border-box;
}
button {
padding: 0.5em;
margin-bottom: 1em;
}
.content {
width: 15em;
height: 8em;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #aaa;
}
.main {
height: 100%;
background: #eee;
padding: 0.5em;
}
.one,
.two,
.three {
display: none;
margin: 0;
padding: 2em;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.one.on,
.two.on,
.three.on {
display: block;
}
.one {
background: #fef8;
}
.two {
background: #fec8;
}
.three {
background: #cdc8;
}
<button>Toggle</button>
<div class="content">
<div class="main on">This is main</div>
<div class="one">This is one</div>
<div class="two">This is two</div>
<div class="three">This is three</div>
</div>

Answer 1

Assuming that the div just need to stack on each other, perhaps a simple implement would be setting content a grid of a single cell, and have all the div placed in grid-area: 1/1/1/1.
Example: (with a simple display toggle)
const btn = document.querySelector("button");
const divs = document.querySelectorAll("div > div");
let i = 1;
btn.addEventListener("click", () => {
if (i === 4) {
divs.forEach((div) => div.classList.remove("on"));
i = 1;
return;
}
divs[i - 1].classList.toggle("on");
divs[i].classList.toggle("on");
i++;
});
.content {
width: 15em;
height: 20em;
margin: 0;
padding: 0;
border: 1px solid blue;
display: grid;
}
.main {
border: 1px solid red;
grid-area: 1/1/1/1;
}
.one,
.two,
.three {
display: none;
margin: 0;
padding: 1em;
z-index: 3;
border: 1px solid green;
grid-area: 1/1/1/1;
}
.one.on,
.two.on,
.three.on {
display: block;
}
button {
padding: 6px;
margin-bottom: 1em;
}
.one {
background-color: rgba(100, 149, 237, 0.25);
}
.two {
background-color: rgba(34, 139, 34, 0.25);
}
.three {
background-color: rgba(255, 140, 0, 0.25);
}
<button>Toggle</button>
<div class="content">
<div class="main">This is main</div>
<div class="one">This is one</div>
<div class="two">This is two.</div>
<div class="three">This is three.</div>
</div>