CSS 网格媒体查询不工作（初学者）

Question

标准PC像素版运行良好！ Pc Version image。移动版右侧边栏应该在内容下面，但它仍然在右侧 Mobile version，我不知道似乎是什么问题，在 home.css 媒体查询网格模板区域我猜猜我遗漏了什么，我是 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

我用代码笔做了一个你想要的演示。 grid demo

调整浏览器大小以查看不同媒体查询中的网格变化。

.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';
  }
}

CSS 网格媒体查询不工作（初学者）

CSS Grid Media Query not working (Beginner)

css

grid

css-grid