Сетка контейнера превышает максимально допустимую пропускную способность на мобильных устройствах

Question

У меня проблемы с макетом моего контейнера, по какой-то причине он проходит максимальную ширину моего контейнера, которая составляет 80 мм только в прошлом Моя проблема на мобильных устройствах

пример: 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, если размер экрана не позволяет увеличить размер). Вам нужно будет справиться с переполнением внутри самих контейнеров, но это по крайней мере заставит его обернуться.