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:
grid-template-areas
or any of thegrid-area
definitions - you'll see the grid items stacking as the window size reduces...