Css 两个柱网轴线应合并为一个柱网轴线

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

.container{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格模板行：重复（3，50px）；
网格自动流：列；
}
.项目-1{
背景色：黑色；
格构柱：跨度1；
网格行：跨度3；
}
.项目-2，
.项目-3，
.项目-4{
格构柱：跨度1；
网格行：跨度1；
}
.项目-2{
背景颜色：深粉色；
}
.项目-3{
背景颜色：黄色；
}
.项目-4{
背景颜色：蓝色；
}

您可以试试

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

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

1条黑线和3条彩色线

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

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

---

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

这似乎不会使列换行，只会将三个颜色的项保留在黑色项的右侧。或者您是否也更改了项目的css？谢谢。我知道媒体查询是可能的。然而，我一直在寻找一种不用媒体查询就能实现这一点的方法。我想避免媒体查询的原因是断点需要根据用于创建网格的常量来计算。我希望css网格提供一个更干净的解决方案，不需要这样的依赖关系。像这样的文章在没有媒体查询的情况下展示了css网格的响应能力，但是我不知道如何将这些技术应用到我的场景中。我理解。网格和柔性箱功能强大，但结构不可能如此动态。给定结构的响应性可以是。如果没有媒体的质疑，这将更加困难。给定的结构..您希望它们是1-3，这意味着您希望它们在开始时表现得像一个列，然后换行。要像这样更改当前结构，您需要进行媒体查询。如果你改变你的HTML结构，你就会实现它。假设您将这3个颜色div包装在一个父div中，那么您将有两个主要元素来定位和播放。“现在在较小的屏幕上，右侧的三个项目消失了，只有黑色项目可见。这是因为我在

网格模板行中声明了整整3行：重复（3200px）

，对吗？”不。那不正确。右边的列消失了，因为它里面没有内容，也没有定义的宽度。因此，一旦浏览器窗口缩小到600px以下（基于

网格模板列：repeat（auto-fit，minmax（300px，1fr））

和两列网格），第二列的宽度就会缩小到0。如果第二列中的一个网格项具有某种宽度，您就会看到它。在小屏幕上切换到垂直布局方面，如果媒体查询不是一个选项，浏览器应该如何知道如何进行转换？我的希望是，一旦两列（最小宽度300px）不再相邻，我可以将网格切换到垂直布局。