Html Css网格模板区域在浏览器中不起作用

我将创建响应css网格布局，对于dekstop屏幕大小，我想要五个div，它工作正常，但对于响应大小，我想要div行，如下图所示，我尝试了这个，我无法专注于这个。。。我是网络开发新手

.first{
  grid-area: sys1;  
  width: 180px;
  height: 170px;
}

.second{
    grid-area: sys2;
    width: 180px;
height: 170px;
}
.third{

    grid-area: sys3;
}
.fourth{
    grid-area: sys4;
    width: 180px;
height: 170px;
}
.fifth{
    grid-area: sys5;
    width: 180px;
height: 170px;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(1, 100%);
    grid-template-areas: "sys1 sys2 sys3 sys4  sys5";
}
@media(max-width:600px){
    .grid-container {
        display: grid;
        grid-template-columns: repeat(1,100%);
        grid-template-rows: 40px 4em 40px;
          grid-template-areas: "sys1 sys2"
                                     "sys3 sys3"
                                      "sys4 sys5"
                            }
}

  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }

1.
2.
3.
4.
5.

---

这段代码在这里很好用，但在chrome浏览器中不起作用，仅显示五个分区。

如果您是

web开发的新手

并且希望直接为您的网站创建

响应性布局

，那么我建议您开始使用

引导

，而不是写下自己的

css

，这将对您有很大帮助

我已经在

bootstrap

中转换了您的代码，它是响应的。如果调整

屏幕的大小

，它将缩小到

图像

中所述的所需输出，但是

代码

要小得多，这就是

引导的功能

css
只是给每个
div


.col-md-2，
.col-6{
高度：200px；
}

1.
2.
3.
4.
5.
您似乎已经定义了一个1列网格，但希望该区域需要2列扫描我使用bootstrap 4获得相同的结果？