Getting CSS grid areas to stack on mobile (single column layout) - css

Question

I am trying to get CSS Grid blocks to stack on top of each other when viewed on small screens. I know I can write media queries to change two columns to one. But I thought Grid could handle this without them?
I thought I could achieve this with auto-fit on columns. However, I think I may of misunderstood how this works?
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: 1fr 1fr;
grid-template-areas: "leftCol rightTop" "leftCol rightBottom";
height: 100vh;
}
.leftCol {
grid-area: leftCol;
background-color: pink;
width: 100%;
height: 100;
}
.rightBottom {
grid-area: rightBottom;
background-color: yellow;
width: 100%;
height: 100;
}
.rightTop {
grid-area: rightTop;
background-color: blue;
width: 100%;
height: 100;
}
<div class="grid-container">
<div class="leftCol"></div>
<div class="rightBottom"></div>
<div class="rightTop"></div>
</div>
When the screen is below 400px, the right hand column just disappears. I was expecting them to stack on top of each other.
For example:
CodePen Example

Answer 1

I am trying to get CSS Grid blocks to stack on top of each other when viewed on small screens. I know I can write media queries to change two columns to one. But I thought Grid could handle this without them? I thought I could achieve this with auto-fit on columns.
You can.
Here you go:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-auto-rows: 50%;
height: 100vh;
}
.leftCol { background-color: pink; }
.rightBottom { background-color: yellow; }
.rightTop { background-color: blue; }
body { margin: 0; }
<div class="grid-container">
<div class="leftCol"></div>
<div class="rightBottom"></div>
<div class="rightTop"></div>
</div>
revised codepen
Here's the problem with your original code:
The repeat() function allows you to render a pattern of tracks in the grid container.
With auto-fit or auto-fill, the repeat() function will render as many tracks as possible without overflowing the container.
By itself, your code works as you expect, as illustrated above.
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
With this rule, the grid items stack into a single column on smaller screens.
However, when you introduce explicit columns and rows, this interferes with the ability of repeat() and auto-fit to do their job.
grid-template-areas: "leftCol rightTop" "leftCol rightBottom"
This rule tells grid items where they need to be, stunting repeat().
grid-template-rows: 1fr 1fr
This rule creates a two-row limit in the container, pushing the third item off-screen.
In a nutshell, don't add rules that interfere with repeat() / auto-fit. If you need a more sophisticated layout, then use media queries.

Answer 2

try using
css:
.grid-container div {
display: inline-block;
float: left;
}