CSS: Responsive 3x3 Grid messing auf Fenstergröße

Question

Ich versuche, ein reaktionsfähiges 3x3 Gitter zu machen, um meine Nullen und Kreuze Spiel auf zu setzen. Es funktioniert für mich, wenn ich einen maximierten Bildschirm habe, aber sobald ich das Fenster kleiner mache, um nach Reaktionsfähigkeit zu suchen, wird alles durcheinander gebracht. Was ist los? Sollte ich etwas anderes als vh benutzen? 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

Ich würde wahrscheinlich nehmen Sie die flexbox Route. Ich habe Ihre gameGrid-Klasse beibehalten, aber eine Zeilenklasse hinzugefügt und innerhalb jeder Zeile habe ich 3 Zellen hinzugefügt. Mach dir keine Sorgen über die naming, es sei denn du willst.

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