如何在没有媒体查询的情况下将2个css网格列变成1个移动网格列

Question

正如标题所说+我需要在每个设备上的一个单元格中保留itemX和itemY。媒体查询是唯一的解决方案吗？如果有更多的本地css网格方式，我很想学习它。

参见小提琴：https://jsfiddle.net/forusak/ctg3auh0/

.container {
display: grid;
grid-template: repeat(10, auto) / repeat(auto-fit, minmax(250px, 1fr));
column-gap: 30px;
color: white;
}
.container>* {
background-color: #b90011;
border: 1px solid black;
padding: 5%;
height: 20px;
}
.item1 {
grid-row: 1 / 10;
height: auto;
}

/* comment out part bellow to see mobile responsivity which is missing here */
.itemX,
.itemY {
grid-area: 3 / 2 / 3 / 2;
width: 40%;
}
.itemY {
margin-left: auto;
}

<div class="container">
<div class="item1">   </div>
<div class="item">   </div> 
<div class="item">   </div>

<div class="itemX"> itemX  </div>
<div class="itemY">  itemY  </div>

<div class="item">  </div>
<div class="item">  </div> 
</div>

Answer 1

检查以下代码。在屏幕宽度<464px的CCD_ 1和CCD_。

body {
padding: 1rem;  
}
.res-grid-1 {
--min-size: 25rem;

display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));
grid-gap: 1rem;
}
.res-grid-1 > div {
padding: 5rem 1rem;
text-align: center;
font-size: 2rem;
background: #557571;
color: #ffffff;
}
.res-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
grid-gap: 1rem;
}

<div class="res-grid-1">
<div>Item 1</div>
<div class="res-grid-2">
<div>Item X</div>
<div>Item Y</div>
</div>
</div>

然而，有一个小错误，在屏幕宽度1280px和1328px之间，itemX和itemY正在水平地重新组装(应该是垂直的(。这是由于网格的嵌套；可以在没有媒体查询的情况下实现响应CSS网格，但在这里，您正在尝试为没有媒体查询的嵌套网格实现同样的效果。

如果你想使用媒体查询，你可以通过对CSS进行以下更改来修复这个错误：

类内res-grid-2替换行：

grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));

带有：

grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));

并添加：

@media only screen and (max-width: 576px) {
.res-grid-2 {
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
}