Css 如何在自动调整轴网柱模板中，将轴网项目全宽包装为一列两跨

我正在使用样式化的组件，但我认为这不会有多大区别。我要做的是使网格自动与行宽度对齐。当我为前一列应用2 span时，下一列不会在特定的视口宽度范围内全宽换行。之后，我减少了更多的视图端口，然后它返回到我想要的。如何在不使用媒体查询和flexbox的情况下修复此问题？我知道这可以通过媒体查询解决，但我想在没有它的情况下解决

---

LogoContact是父容器，Logo是用于具有2个跨距的列的。联系人div是我想要解决的问题。

一个选项是使用媒体查询，当屏幕宽度在300到600之间时，给联系人div一个2的跨度

更好的解决方案是使用flexbox而不是grid。下面是一个例子：

文件
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
#标识联系人{
显示器：flex；
柔性包装：包装；
}
#标志{
最小高度：150px；
最小宽度：600px；
背景色：#a85218；
弹性：21；
颜色：白色；
}
#接触{
最小高度：150px；
最小宽度：300px；
弹性：1；
背景色：#d0507e；
颜色：白色；
}
标志
接触

我看到您在编辑中提到您不想使用媒体查询，这是我给出的选项之一。但是我的flexbox解决方案呢，这不能解决您的问题，还是您必须使用网格？很抱歉，没有添加“编辑：”。我想只使用css网格。我知道如果网格没有这个功能，那么flex是最好的方法。我只是在学习CSS网格，所以我了解flex，知道使用flex wrap甚至不需要我问这个问题。所以，谢谢你回答这个问题，是的，我想要一个只有网格的解决方案@CvPI认为，如果您想要一个只有网格的解决方案，媒体查询基本上是您唯一的选择。您的问题是，您正在尝试与css网格的工作方式进行斗争，因此就我所知，不会有一个优雅的解决方案。

const LogoContact = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 150px;
`;

const Logo = styled.div`
  background-color: #a85218;
  grid-column: span 2;
  color: white;
`;

const Contact = styled.div`
  background-color: #d0507e;
  color: white;
`;