I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here:
https://jsfiddle.net/xvg84cuh/
.grid{
display: grid;
grid-template-rows: auto;
grid-template-areas:
"left right"
". right";
}
.grid div:nth-child(1){
grid-area: left;
}
.grid div:nth-child(2),
.grid div:nth-child(3){
grid-area: right;
}
div{
float: left;
width: 100%;
}<div class="grid">
<div>
Image
</div>
<div>
Stuff 1
</div>
<div>
Stuff 2
</div>
</div>As you can see in the example, the "stuff 1" and "stuff 2" divs are overlapping instead of appearing sequentially below each other.
Thank you for your assistance :)