Problem Using CSS Grid Layout for Responsive Design

Hi!

I am trying to build a site using CSS Grid layout to familiarize myself with it. My goal is to build a max two-column layout (one column in mobile) and infinite rows (as more content is added). I can't seem to find how to distinguish a max of two columns. In order for it to be responsive, I am using the min-max and auto-fit, but that is forcing multiple columns (for viewports wider than 1135px). Should I give up my pursuit and use flexbox, or is there a way to use auto-fit and give a max-column? The code is thin right now bc I am just starting the site. Thanks!

CSS

.container { height: 100vh; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-template-rows: 90px 1fr; grid-auto-columns: 200px;

}

.header { border-bottom: 2px solid black; border-right: 2px solid black;
}

.nav {
border-bottom: 2px solid black; }

.main { border-right: 2px solid black; }

HTML <div class="container">

<div class="header">
<img class="coolpic" src="">
</div>

<div class="nav"> <h2>Products Stories Search</h2> </div>

<div class="main"> <h2>Cool stuff I like</h2> </div>

<div class="aside"> <h2>Cool pics over here</h2> <img class="coolpic" src=""> </div>

</div>