响应式 CSS 网格的问题。一些“细胞”网格没有响应

Question

我的 css 网格有一个奇怪的问题。我有一个 2 列网格：

.main-container {
  top: 0;
  display: grid;
  background-image: url('https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/wal.png');
  background-attachment: fixed;
  grid-template-columns: 50% 50%;
  box-sizing: border-box;
  font-size: 1.5rem;
  z-index: -1;
}

@media all and (max-width: 890px) {
  .main-container {
    grid-auto-flow: row dense;
    grid-auto-columns: 1fr;
  }
  .main-container div {
    grid-column: 1 / span 3;
  }
}

<div class="main-container">
  <div class="item1 cnt">
    <video id="vid" src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
  </div>
  <div class="item2 cnt">
    <p style="font-size:50px; color:white;"> Join Us! </P>
    <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#1f1f1f; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">SEND YOUR CV</button>
  </div>
  <div class="item3 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/LOGO.png" />
  </div>
  <div class="item4 cnt">
  </div>
  <div class="item5 cnt">
    <h4>WHO WE ARE?</h4>
    <p>
      ArvanJobs is above all peace of mind. It is a new way of working, of traveling, of training, of advancing in your career. Whether you are a company looking for workers or you are looking for a new job opportunity, ArvanJobs will always be by your side,
      selecting the best workers and the best companies that will boost your career.
    </p>
  </div>
  <div class="item6 cnt">
    <h4>WHY WORK WITH US?</h4>
    <p>
      For our personal treatment, our advice, and above all for our experience working in hotels in numerous countries. Because we know how difficult it is to take that step of daring to work in a foreign country. Because we know how hard it is to find the
      right staff.
    </p>
  </div>
  <div class="item7 cnt">
  </div>
  <div class="item8 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
  </div>
  <div class="item9 cnt">
    <h4>HOW WE WORK?</h4>
    <p>
      All candidates are interviewed by staff who have worked in hotels, not offices. The same happens with our clients who have to satisfy a series of criteria and guarantees for the worker to work with us.</p>
  </div>
  <div class="item13 cnt">
    <div class="item13-1">
      <p>APPLY NOW TO GET STARTED</p>
    </div>
    <div class="item13-2">
      <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#967b5d; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">APPLY NOW</button>
    </div>
  </div>
  <div class="item10 cnt">
    <div class="container" style="width:100vw; max-width: max-content; padding-left: 0px; padding-right: 0px;">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators 
                <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>
    -->
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/0.png" alt="Reception" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Chefs</h3>
              <p>LA is always so much fun!</p>
            </div>
          </div>
          <div class="item">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/1.png" alt="housekeeping" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Waiters</h3>
              <p>Thank you, Chicago!</p>
            </div>
          </div>
          <div class="item">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/2.png" alt="chefs" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Housekeeping</h3>
              <p>We love the Big Apple!</p>
            </div>
          </div>
          <div class="item">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/3.png" alt="awijr" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Reception</h3>
              <p>We love the Big Apple!</p>
            </div>
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
  <div class="item11 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
  </div>
  <div class="item12 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2-1.png" />
  </div>

我在达到 400~ px 时遇到了这个问题。标记（我没有这个宽度范围的CSS）：

就像 .main-container 一样，它获得了响应，并且其中的一些项目获得了其他不同的响应。我不明白，而且我的 CSS 很长，无法将其全部发布到这里。您可以在 https://arvanjobs.com 看到这个混乱的情况

Answer 1

使用媒体查询增加复杂性比删除它要容易得多。
因此，将您的移动样式放入常规 CSS 中，然后添加您想要在较大屏幕宽度上发生的内容。

* {
  max-width: 100%;
}

.main-container {
  top: 0;
  display: grid;
  background-image: url('https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/wal.png');
  background-attachment: fixed;
  grid-auto-flow: row dense;
  grid-auto-columns: 1fr;
  box-sizing: border-box;
  font-size: 1.5rem;
  z-index: -1;
}

@media all and (min-width: 890px) {
  .main-container {
    grid-template-columns: 50% 50%;
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div class="main-container">

    <div class="item1 cnt">
      <video id="vid" src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" autoplay loop muted type="video/mp4"> </video>
    </div>
    <div class="item2 cnt">
      <p style="font-size:50px; color:white;"> Join Us! </P>
      <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#1f1f1f; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">SEND YOUR CV</button>
    </div>
    <div class="item3 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/LOGO.png" />
    </div>
    <div class="item4 cnt">

    </div>
    <div class="item5 cnt">
      <h4>WHO WE ARE?</h4>
      <p>
        ArvanJobs is above all peace of mind. It is a new way of working, of traveling, of training, of advancing in your career. Whether you are a company looking for workers or you are looking for a new job opportunity, ArvanJobs will always be by your side,
        selecting the best workers and the best companies that will boost your career.
      </p>
    </div>
    <div class="item6 cnt">
      <h4>WHY WORK WITH US?</h4>
      <p>
        For our personal treatment, our advice, and above all for our experience working in hotels in numerous countries. Because we know how difficult it is to take that step of daring to work in a foreign country. Because we know how hard it is to find the
        right staff.
      </p>
    </div>
    <div class="item7 cnt">

    </div>
    <div class="item8 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
    </div>
    <div class="item9 cnt">
      <h4>HOW WE WORK?</h4>
      <p>
        All candidates are interviewed by staff who have worked in hotels, not offices. The same happens with our clients who have to satisfy a series of criteria and guarantees for the worker to work with us.</p>
    </div>
    <div class="item13 cnt">
      <div class="item13-1">
        <p>APPLY NOW TO GET STARTED</p>
      </div>
      <div class="item13-2">
        <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#967b5d; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">APPLY NOW</button>
      </div>
    </div>
    <div class="item10 cnt">

      <div class="container" style="max-width: max-content; padding-left: 0px; padding-right: 0px;">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators 
            <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
-->
          <!-- Wrapper for slides -->
          <div class="carousel-inner">

            <div class="item active">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/0.png" alt="Reception">
              <div class="carousel-caption">
                <h3 style="color:white;">Chefs</h3>
                <p>LA is always so much fun!</p>
              </div>
            </div>

            <div class="item">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/1.png" alt="housekeeping">
              <div class="carousel-caption">
                <h3 style="color:white;">Waiters</h3>
                <p>Thank you, Chicago!</p>
              </div>
            </div>

            <div class="item">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/2.png" alt="chefs">
              <div class="carousel-caption">
                <h3 style="color:white;">Housekeeping</h3>
                <p>We love the Big Apple!</p>
              </div>
            </div>

            <div class="item">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/3.png" alt="awijr">
              <div class="carousel-caption">
                <h3 style="color:white;">Reception</h3>
                <p>We love the Big Apple!</p>
              </div>
            </div>

          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
    <div class="item11 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
    </div>
    <div class="item12 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2-1.png" />
    </div>
</body>