我是CSS的新手，正在探索如何在第一行显示一个项目，但在第二行显示两个项目时，视口的大小大于800px。 但是当视口的大小小于这个值时，所有的项目都应该显示在三个不同的行中。
下面是相同的代码片段
谢谢！！
null
@media (max-width:800px)
{
.parent
{
display:grid;
grid-template-columns: 100px;
grid-template-rows: 50px 50px 50px;
grid-template-areas: "first" "second" "third";
}
}
.parent
{
display:grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px;
grid-template-areas: "first first" "second third";
}
.first{
grid-area:first;
background-color:blue;
}
.second{
grid-area:second;
background-color:red;
}
.third
{
grid-area:third;
background-color:green;
}<div class="parent">
<div class="first div">Lorem ipsum dolor sit amet </div>
<div class="second div">Lorem ipsum dolor sit amet</div>
<div class="third div">Lorem ipsum dolor sit amet</div>
</div>null
媒体查询规则并不优先于其他规则，它们仍然在级联的上下文中工作。 只需将媒体查询移动到原始.parent样式下面即可。
null
.parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px;
grid-template-areas: "first first" "second third";
}
@media (max-width:800px) {
.parent {
display: grid;
grid-template-columns: 100px;
grid-template-rows: 50px 50px 50px;
grid-template-areas: "first" "second" "third";
}
}
.first {
grid-area: first;
background-color: blue;
}
.second {
grid-area: second;
background-color: red;
}
.third {
grid-area: third;
background-color: green;
}<div class="parent">
<div class="first div">Lorem ipsum dolor sit amet </div>
<div class="second div">Lorem ipsum dolor sit amet</div>
<div class="third div">Lorem ipsum dolor sit amet</div>
</div>