How do I make this grid responsive? - html

Question

I'm trying to make this grid responsive but it's not working as it should. How do I make this grid responsive ? I want to make them a one column grid when decreasing the browser. I tried using media queries or some frameworks but it didn't look good to me. I would appreciate the help. Here's the code:
css:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas:
"farmhouseburger quinoablack"
"chocolatemilkshake standardburger"
"checkout perfect";
}
.farmhouseburger {
grid-area: farmhouseburger;
background: url(imgs/farmhouse.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.quinoablack {
grid-area: quinoablack;
background: url(imgs/quinoa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.chocolatemilkshake {
grid-area: chocolatemilkshake;
background: url(imgs/milkshakeback.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.standardburger {
grid-area: standardburger;
background: url(imgs/standard.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.checkout {
grid-area: checkout;
background: url(imgs/checkout.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.perfect {
grid-area: perfect;
background: url(imgs/barbecue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
HTML:
<div class="container">
<div class="farmhouseburger">
<div>
<h3 class="h3grid">NEW</h3>
<h1>FARMHOUSE<br>BURGER</h1>
<p>This burger’s name explains itself. Of course, you can<br>also top it with crisp lettuce, tomatoes, ketchup,<br>barbecue sauce and anything else.</p>
<h1>$2.49</h1>
<button class="buttongrid">ORDER NOW</button>
</div>
</div>
<div class="quinoablack">
<div>
<h3 class="h3grid">NEW</h3>
<h1>QUINOA & BLACK<br>BEAN BURGER</h1>
<p>We can’t think of a better way to celebrate summer than<br>with these omg-worthy hamburgers. Plus, try our over-<br>the-top creative cheeseburgers.</p>
<h1>$3.99</h1>
<button class="buttongrid">ORDER NOW</button>
</div>
</div>
<div class="chocolatemilkshake">
<div>
<h3 class="h3grid">NEW</h3>
<h1>CHOCOLATE<br>MILKSHAKE</h1>
<p>Milkshakes always taste good if you are a chocolate lover.<br>You can throw one together with a cream or experiment<br>with all kinds of extra flavors.</p>
<h1>$2.49</h1>
<button class="buttongrid">ORDER NOW</button>
</div>
</div>
<div class="standardburger">
<div>
<h3 class="h3grid">NEW</h3>
<h1>STANDARD<br>BURGER<br>MEAL</h1>
<p>These incredible burger meal offer a unique twist to the<br>classic hamburger, incorporating ingredients like<br>pimento cheese and sesame.</p>
<h1>$4.99</h1>
<button class="buttongrid">ORDER NOW</button>
</div>
</div>
<div class="checkout">
<div>
<h3 class="h3grid">NEW</h3>
<h1>CHECKOUT OUR<br>CATERING MENU</h1>
<p>Throwing the party is never been easier. Order now and<br>let us spice up your party. Burger meals, french fries and<br>cheeseburgers will cheer up your friends.</p>
<h1>$13.99</h1>
<button class="buttongrid">ORDER NOW</button>
</div>
</div>
<div class="perfect">
<div>
<h3 class="h3grid">NEW</h3>
<h1>HOW TO MAKE A<br>PERFECT BURGER</h1>
<p>We will tell you a little secret. Mixing best quality steak<br>and pork and serves them on homemade herb-butter<br>rolls is the best version we know.</p>
<h1>$5.99</h1>
<button class="buttongrid">ORDER NOW</button>
</div>
</div>
</div>

Answer 1

I just use this line of code instance of grid area
/grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));/
I test the code on screen with small size like 390x844 and it work well
css code
.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.farmhouseburger {
background: url(imgs/farmhouse.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.quinoablack {
background: url(imgs/quinoa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.chocolatemilkshake {
background: url(imgs/milkshakeback.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.standardburger {
background: url(imgs/standard.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.checkout {
background: url(imgs/checkout.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.perfect {
background: url(imgs/barbecue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}