CSS 2 columns grid to 2 rows - html

Question

Almost 2 weeks later, countless tries later, even asking a similar question before, I can't make something so simple. CSS doesn't return any info as we know, therefore I don't even know why.
All the examples that I find work, they work on their own, or with media query, while mine, never acts as I want it to, even if I copy the solution. The grids do shrink, and only that happens, no new row ever appears anywhere.
I simplified my design, my website grew over almost those 2 weeks, and I'm sharing just the minimum here, so someone can maybe tell me why grid never adjusts itself, regardless of everything. I want to achieve a very simple thing.
Top consists of 2 columns [top_left + top_right], and I want them to change into 2 rows at a certain screen width, same applies to bottom part [bot_left + bot_right]. In theory and practice, this is doable with both media query and without. No media queries using auto-fill seems to be a better option, because it just adjusts on its own to the screen size, making everything simpler, I guess.
<div class="container">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="top_mid"> </div>
<div class="main"></div>
<div class="bot_left"></div>
<div class="bot_right"></div>
<div class="bot"></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
background-color: #E6E6E3;
overflow-x: hidden;
}
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 0px;
}
.top_left {
height: 100px;
display: grid;
background-color: white;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
border: 1px solid red;
}
.top_mid {
display: grid;
background-color: #36454F;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.top_right {
height: 100px;
display: grid;
background-color: white;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
border: 1px solid blue;
}
.main {
max-width: 80%;
margin: auto;
display: grid;
background-color: white;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 5;
border-left: 1px solid #78BE21;
border-right: 1px solid #78BE21;
}
.bot_left {
height: 150px;
display: grid;
background-color: #BCD9ED;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
border-top: 1px solid #191919;
border-bottom: 1px solid #191919;
}
.bot_right {
height: 150px;
display: grid;
background-color: #7F8778;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
border-top: 1px solid #191919;
border-bottom: 1px solid #191919;
}
.bot {
height: 250px;
display: grid;
background-color: deepskyblue;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
grid-row-end: 8;
}