css - 两列网格应该包装成一列网格

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

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