我要创建响应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;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href='./css/slider.css'>
</head>
<body>
<div class="grid-container">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
<div class="fifth">5</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
</script>
</body>
</html>
这段代码在这里很好用，但在chrome浏览器中就不行了，只显示了五个div。
如果您是Web开发的新手，并且希望直接跳转到为您的网站创建响应式布局，那么我将建议您开始使用引导，而不是写下您自己的CSS，它会对您有很大帮助。
我已经在bootstrap中转换了您的代码，它是响应性的。 如果您调整屏幕的大小，它将缩小到您在图像中提到的所请求的输出，但是使用更少的代码，这就是引导的强大功能。
code>CSS只是将height赋予每个div
null
.col-md-2,
.col-6 {
height: 200px;
}<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-md-2 col-6 bg-primary">
<h1>1</h1>
</div>
<div class="col-md-2 col-6 bg-dark">
<h1>2</h1>
</div>
<div class="col-md-2 col-12 bg-success">
<h1>3</h1>
</div>
<div class="col-md-2 col-6 bg-danger">
<h1>4</h1>
</div>
<div class="col-md-2 col-6 bg-secondary">
<h1>5</h1>
</div>
</div>
</div>