如何在自动调整网格列模板中使用一列占用 2 个跨度将网格项包装为全宽答案

【问题标题】：How to wrap grid item to full width with one column taking 2 spans in an auto-fit grid-column-template如何在自动调整网格列模板中使用一列占用 2 个跨度将网格项包装为全宽
【发布时间】：2021-08-06 00:57:37
【问题描述】：

我正在使用样式化组件，但我认为这不会有太大的不同。我想要做的是让网格自动对齐到行宽。当我为前一列应用 2 跨度时，以下列不会在特定范围的视口宽度上换行到全宽。之后，我减少了视口，然后它又回到了我想要的位置。如何在不使用媒体查询和 flexbox 的情况下解决此问题？我知道这可以通过媒体查询来解决，但我想在没有它的情况下做到这一点。

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

LogoContact 是父容器，Logo 用于需要 2 个跨度的列。 Contact div 是我要修复的。

【问题讨论】：

我看到您在编辑时提到您不想使用媒体查询，这是我提供的选项之一。但是我的 flexbox 解决方案呢，这不能解决你的问题还是你必须使用网格？
对不起，没有添加“编辑：”。我想只用css网格来做。我了解如果网格没有该功能，那么 flex 是最好的方法。我只是在学习 CSS 网格，所以我了解 flex 并且知道 flex-wrap 甚至不需要我问这个问题。所以，感谢您回答这个问题，是的，我想要一个仅限网格的解决方案。 @CvP
我认为如果你想要一个只有网格的解决方案，媒体查询基本上是你唯一的选择。您的问题是您正在尝试与 css 网格的工作方式作斗争，因此据我所知，不会有一个优雅的解决方案。

标签： css css-grid styled-components

【解决方案1】：

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

更好的解决方案是使用 flexbox 而不是网格。这是一个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      #logoContact {
        display: flex;
        flex-wrap: wrap;
      }

      #logo {
        min-height: 150px;
        min-width: 600px;
        background-color: #a85218;
        flex: 2 1;
        color: white;
      }

      #contact {
        min-height: 150px;
        min-width: 300px;
        flex: 1 1;
        background-color: #d0507e;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="logoContact">
      <div id="logo">logo</div>
      <div id="contact">contact</div>
    </div>
  </body>
</html>

【讨论】：