html - CSS:响应式 3x3 网格在调整窗口大小时搞砸了

Question

我正在尝试制作一个响应式 3x3 网格来放置我的零点和十字游戏。当我有一个最大化的屏幕时，它对我有用，但是一旦我缩小窗口以检查响应能力，一切都会变得困惑。这是怎么回事？我应该使用 vh 以外的东西吗？ http://codepen.io/apswak/pen/dXdjvW

<h3>Noughts and Crosses</h3>
<div class="gameGrid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

样式.css

body {
  background-color: wheat;
  margin: 0;
  padding: 0;
}

.gameGrid {
  margin: 0 auto;
  padding: 0;
  width: 62vh;
  height: 62vh;
}

.cell {
  margin-bottom: -5px;
  display: inline-block;
  width: 18.82vh;
  height: 18.82vh;
  border: 5px solid green;
  background-color: blue;
}

Answer 1

我可能会选择 flexbox路线。我保留了您的 gameGrid 类，但添加了一个行类，在每一行内，我添加了 3 个单元格。不用担心 naming除非你愿意。

.gameGrid {
  margin: 0 auto;
  padding: 0;
  width: 62vh;
  height: 62vh;
  background: green;
}
.gameGrid--row {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
.gameGrid--cell {
  background: blue;
  margin: 5px;
  flex: 1 0 auto;
}
.gameGrid--cell:before {
  content: '';
  float: left;
  padding-top: 100%;
}

<div class="gameGrid">
  <div class="gameGrid--row">
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
  </div>
  <div class="gameGrid--row">
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
  </div>
  <div class="gameGrid--row">
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
  </div>
</div>