Question

由于某种原因，我的容器布局出现问题，因为它超出了容器的最大宽度80rem，我无法想象如何解决此问题，在我的其他网格布局中，我没有这个问题最后，我的问题是在移动设备上

示例：https://codesandbox.io/s/twilight-mountain-t1c1m

代码：

<Container>
      <NewsWrapper>
        <CardTop>
          <div className="Bg" />
          <div className="headerH3">
            <h3>
              <a href="xd4">asdddddddddddddddddddddddddddddddddddd</a>
            </h3>
          </div>
        </CardTop>
        <CardTop>
          <div className="Bg" />
          <div className="headerH3">
            <h3>
              <a href="xd3">adssssssssssssssssssssssssssssssssssssss</a>
            </h3>
          </div>
        </CardTop>
        <CardTop>
          <div className="Bg" />
          <div className="headerH3">
            <h3>
              <a href="xd2">adsssssssssssssssssssssssssssssssssssssssss.</a>
            </h3>
          </div>
        </CardTop>
        <CardTop>
          <div className="Bg" />
          <div className="headerH3">
            <h3>
              <a href="xd">adssssssssssssssssssssssssssssssssss</a>
            </h3>
          </div>
        </CardTop>
      </NewsWrapper>
    </Container>

css：

export const Container = styled.div`
  background: none;
  height: 100%;
  margin: 0 auto;
  max-width: 80rem !important;
  padding-right: 15px;
  padding-left: 15px;
`;

export const NewsWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  margin-top: 100px;
`;

export const CardTop = styled.div`
  position: relative;
  height: 300px;
  width: 100%;
  margin-bottom: 40px;
  & .Bg {
    display: flex;
    align-items: center;
    position: relative;
    background: red;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    height: 200px;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    :hover {
      box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.1);
    }
  }
  & .headerH3 {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  & > div > h3 {
    text-align: left;
    font-size: 1rem !important;
    font-family: Roboto Slab, serif;
    font-weight: 700;
    margin: 10px 0px 10px 0 !important;
  }
  & > div > h3 > a {
    text-decoration: none;
    color: #1976d5;
    display: block;
    clear: both;
    :hover,
    :active {
      filter: brightness(115%);
    }
  }
`;

编辑打印问题：

Answer 1

这样做的原因是您的样式中定义的grid-template-columns不允许换行。将其设置为grid-template-columns: 1fr 1fr 1fr 1fr将迫使浏览器尝试平均划分空间，使每个元素占整个空间的四分之一。

您可以改用类似于grid-template-columns: repeat(auto-fit, minmax(250px,1fr));的方式，这将尝试动态地适应列（如果屏幕尺寸不允许更大的尺寸，则将列的大小限制为最小250px）。您将需要处理容器自身内部的溢出，但这至少会迫使其包装。

网格容器超出了移动设备上允许的最大宽度

1 个答案: