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>

style.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類，但添加了一個row類，並且在每一行中添加了3個單元格。 除非您願意，否則不必擔心命名 。

 .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>