CSS Grid Media Query not working (Beginner) - css

Question

The standard Pc pixel version is working fine! Pc Version image.
The mobile version the right sidebar should go under the content but its still on the right Mobile version, and i do not know what seems to be the problem,in the home.css media query grid-template-areas i guess im missing something, im new on Css Grid
home.css
#media only screen and (min-width: 768px) {
.grid{
display: grid;
grid-template-areas:
'lsidebar content content'
'lsidebar rsidebar rsidebar'
'footer footer footer';
grid-template-columns:1fr 4fr;
}
}
.grid{
display: grid;
padding: 20px;
grid-template-areas:
'lsidebar content rsidebar'
'lsidebar content rsidebar'
'footer footer footer';
grid-template-columns:1fr 3fr 1fr;
}
.lsidebar{
grid-area:lsidebar;
}
.content{
grid-area:content;
}
.rsidebar{
grid-area:rsidebar;
}
.footer{
grid-area:footer;
}
home.blade.php:
#extends('layouts.app')
#section('content')
<link rel="stylesheet" href="{{ asset('css/home.css') }}">
<div class="grid">
<div class="lsidebar">
<ul>
<li>
Home
</li>
<li>
Messages
</li>
<li>
Games
</li>
<li>
Pages
</li>
</ul>
</div>
<div class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos voluptatum vitae rem harum hic. Molestias laudantium
dolore quod modi repudiandae, ullam molestiae tempore sed ratione minus nihil pariatur fugit veniam?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas ex soluta nihil molestias asperiores repudiandae. Aspernatur accusamus, enim alias quod, non neque aliquam, soluta aut autem mollitia eaque
impedit assumenda.
</div>
<div class="rsidebar">
Show Friends of this profile
</div>
<div class="footer">
<p style="text-align: center"> This is the footer copyright 2020 This is the footer copyright 2020 This is the footer copyright 2020</p>
</div>
</div>
#endsection

Answer 1

I made a demo of what you want in code pen.
grid demo
resize the browser to see grid changes in different media query.
.lsidebar {
grid-area: lsidebar;
background-color: red;
}
.content {
grid-area: content;
background-color: green;
}
.rsidebar {
grid-area: rsidebar;
background-color: blue;
}
.footer {
grid-area: footer;
background-color: pink;
}
.grid {
display: grid;
grid-gap: 16px;
grid-template-areas:
"lsidebar"
"content"
"rsidebar"
"footer";
}
#media (min-width: 768px) {
.grid {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"lsidebar content"
"lsidebar content"
"lsidebar rsidebar"
"footer footer";
}
}
#media (min-width: 1100px) {
.grid {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
'lsidebar content rsidebar'
'lsidebar content rsidebar'
'footer footer footer';
}
}