如何在不使用媒体查询的情况下将2个CSS网格列设为1个用于移动设备？

如何解决如何在不使用媒体查询的情况下将2个CSS网格列设为1个用于移动设备？

正如标题所述，+我需要将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>

解决方法

签出以下代码。屏幕宽度itemX和itemY将在垂直方向重新组装。

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,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));
  }
}