两列网格应包装为一列网格

Question

在我的CSS网格中，左栏中有一个大项目，右栏中有三个小项目：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: column;
}

.item-1 {
  background-color: black;
  grid-column: span 1;
  grid-row: span 3;
}

.item-2,
.item-3,
.item-4 {
  grid-column: span 1;
  grid-row: span 1;
}

.item-2 {
  background-color: deeppink;
}

.item-3 {
  background-color: yellow;
}

.item-4 {
  background-color: blue;
}

<div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
</div>

现在在较小的屏幕上，右边的三个项目消失了，只有黑色的可见。这是因为我在grid-template-rows: repeat(3, 200px);中正确声明了3行，对吗？

但是我想要的是所有4个项目互相包裹（例如，网格应具有1列和6行）：

我知道可以使用媒体查询来达到此目的，但是在这种情况下，我想避免这种情况。

我已经尝试过grid-template-rows: repeat(auto-fit, 200px)，但是并没有达到预期的效果。

感谢您的帮助！

Answer 1

您可以尝试

.container {
    display: grid;
    grid-template-areas: 'a a';
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(3, 50px);
    grid-auto-flow: column; 
}

3条黑线-3条彩色线

@media only screen and (max-width: 600px) {
   .container {
     grid-template-areas: 'a';
     grid-template-columns: 100%;
     grid-template-rows: repeat(6, 50px);
   }
}

1条黑线和3条彩色线

@media only screen and (max-width: 600px) {
   .container {
     grid-template-areas: 'a';
     grid-template-columns: 100%;
     grid-template-rows: repeat(4, 50px);
   }

  .item-1 {
    grid-row: span 1;
  }
}

您可以根据需要设置媒体查询的宽度。