html - 防止从 CSS 网格流出

Question

当我调整浏览器的宽度以使其看起来像移动设备时，框开始从 div 流出，超过下面的一个。我将盒子的 div 设为蓝色，以便您可以清楚地看到它。

https://i.stack.imgur.com/NE92T.jpg

https://i.stack.imgur.com/irRpr.jpg

body {
  background-color: #ffeead;
  margin: 5%;
}

.container {
  background-color: blue;
  display: grid;
  grid-gap: 10%;
  grid-template-columns: repeat(auto-fill, 350px);
  grid-auto-rows: 400px;
  justify-content: center;
}

.in {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #ffeead;
}

<div class="container">
  <div class="in">1</div>
  <div class="in">2</div>
  <div class="in">3</div>
</div>

标签： htmlcsscss-grid