在 css 网格中，为什么在视口中使用网格模板列 1fr 会溢出到下一部分？

Question

我目前正在学习css网格，完全是菜鸟。我正在尝试创建一个显示 3 的项目组合在浏览器上每行 div 除非屏幕的宽度为 1000 像素或更小，否则它应该是每行一个 div，但是当我在视口中将其设置为 grid-template-columns: 1fr 时，它与下一节重叠，下一节隐藏在 div 后面。如果有人可以帮助我，那就太好了！提前致谢！

下面是示例代码：

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: 100%;
}

section {
  height: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
  background-color: slateblue;
  border: 1px solid black;
}

.projects {
  grid-template-columns: auto auto auto;
  grid-auto-rows: minmax(200px, auto);
  justify-content: stretch;
  align-content: stretch;
}

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  color: white;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.projectPanels {
  position: relative;
  text-align: center;
  border: 1px solid green;
}

.img {
  opacity: 1;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}

.textBoxOutline {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.projectPanels:hover .img {
  opacity: 0.3;
}

.projectPanels:hover .textBoxOutline {
  opacity: 1;
}

.textBox {
  background-color: red;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.contact {
  background-color: gray;
  color: white;
}

@media screen and (max-width: 1000px) {
  .projects {
    grid-template-columns: 1fr;
  }
  .header {
    grid-column-end: 1;
  }
  .img {
    text-align: center;
  }
}

<section class="projects" id="projects">
  <div class="header">
    <h1>PROJECTS</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl suscipit adipiscing bibendum est.
    </p>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="projectPanels">
    <img src="placeHolder.jpg" alt="PlaceHolder" class="img">
    <div class="textBoxOutline">
      <div class="textBox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
</section>
<section class="contact" id="contact">
  <div>
    <h1>CONTACT</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas diam in. Urna porttitor rhoncus dolor purus non. Sem integer vitae justo eget
      magna fermentum iaculis. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Pharetra massa massa ultricies mi. Sed faucibus turpis in eu. Porttitor eget dolor morbi non arcu. Faucibus in ornare quam viverra orci sagittis eu volutpat.
      Etiam tempor orci eu lobortis elementum nibh tellus molestie.</p>
    Email: <a href="mailto:me@example.com">me@example.com</a>
  </div>
</section>

Answer 1

删除 fiddle 中 css 中 .section 样式的 height:100% 似乎可以解决问题。

在 css 网格中，为什么在视口中使用网格模板列 1fr 会溢出到下一部分？

In css grid, why does using grid template columns 1fr in viewport overflow to the next section?

html

css

grid

viewport