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?

```css
.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;
}
```

```html
<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 mock up](https://i.stack.imgur.com/9mLga.jpg)](https://i.stack.imgur.com/9mLga.jpg)

[CodePen Example](https://codepen.io/grantsmith/pen/ZdZrqa?editors=1100)