如何在保持宽高比的文章中创建简单的3x3网格？

Question

我想在CSS / HTML中制作一个3x3的正方形网格，该网格不超过页面的高度并且具有响应能力。

我尝试过更改文章的宽度和高度，以使其百分比减小，但是在移动设备上它太小而在台式机上它太大。

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
  background: tomato;
  font-size: 9vw;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.article1 {
  border-style: solid;
  border-width: 5px;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.h1 {
  font-size: 3vw;
  text-align: center;
}

<article class="article1">
  <div>
    <h1 class="h1">Text 1</h1>
  </div>
  <div class="square-container">
    <div class="square">
      <div class="content">0</div>
    </div>
    <div class="square">
      <div class="content">1</div>
    </div>
    <div class="square">
      <div class="content">2</div>
    </div>
    <div class="square">
      <div class="content">3</div>
    </div>
    <div class="square">
      <div class="content">4</div>
    </div>
    <div class="square">
      <div class="content">5</div>
    </div>
    <div class="square">
      <div class="content">6</div>
    </div>
    <div class="square">
      <div class="content">7</div>
    </div>
    <div class="square">
      <div class="content">8</div>
    </div>
  </div>
  <div>
    <h1 class="h1">Text 2</h1>
  </div>
</article>

我希望它能够调整大小，以便它的宽度和高度能够响应，并且高度永远不会超出显示范围（不必滚动）。