html - 如何使我的网格区域缩小，使它们不在身体之外

Question

基本上，当我缩小浏览器时，我的网格区域会比正文大，我不希望这样。当我缩小浏览器时，也许会以某种方式缩小网格区域，以使它们不在身体之外。

body {
  background-repeat: none;
  background-size: cover;
  width: 75%;
  margin: 0 auto 0 auto;
  padding: 0px;
  border: none;
  overflow: auto;
  box-sizing: border-box;
}

main {
  margin-top: 0rem;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "m1 . side1" "m2 m3 side2";
  grid-gap: 2.5em;
  justify-content: center;
}

.main-content1 {
  grid-area: m1;
  padding: 20px;
}

<main>
  <div class="main-content1">


  </div>
  <div class=main-content2>

  </div>
  <div class=main-content3>

  </div>
  <div class="side-content1">

    <iframe></iframe>



  </div>
  <div class="side-content2">

    <iframe></iframe>
  </div>
</main>

标签： htmlcss