CSSを使用した固定幅Divのダイナミックセル作成の問題

Question

私は次元の固定幅の四角形のdivを320X320と言います（私はモバイルでも同様に動作させたいので）。私の判断基準は、第1ステージのように1スクエアと2ステージになり、320X320のグリッドのような4つの正方形に4分割し、3つ目の9つの正方形のグリッドに、最後に4つ目の12の正方形のグリッドに分割します。

この320X320は、私の唯一の基準は、モバイルで互換性があるようなものです。

これらの計算に基づいて各ステージに基づいて正方形のボックスを描画するためにjQueryを使用します。

Stage 1: 320X320 [1 square] 
Stage 2: 160.66X160.66 [4 squares] => 2 rows 2 columns 
Stage 3: ?? [9 squares] => 3 rows 3 columns 
Stage 4: ?? [12 squares] =>4 rows 3 columns 

私はこれまでに行っていますが、私はこれらの分数がピクセル単位で気に入らないので、これ以外の良い提案をしたいと思います。私は数学ではそれほど良いとは言えません:)上記の計算が間違っているならば、許してください。

ご協力いただきありがとうございます。

Answer 1

多分このようなものを使用できますか？

<style> 
 
    #container { 
 
     display: table; 
 
     height: 320px; 
 
     width: 320px; 
 
    } 
 
    .row { 
 
     display: table-row; 
 
    } 
 
    .square { 
 
     border: 1px solid #00F; 
 
     display: table-cell; 
 
    } 
 
</style> 
 

 
<div id="container"></div> 
 

 
<button onclick="makeSquares(1, 1)">one</button> 
 
<button onclick="makeSquares(2, 2)">four</button> 
 
<button onclick="makeSquares(3, 3)">nine</button> 
 
<button onclick="makeSquares(4, 3)">twelve</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script> 
 
    function makeSquares(rows, columns) { 
 
    var container = $('#container'); 
 
    container.find('.row').remove(); 
 
    for (var row = 0; row < rows; row++) { 
 
     var relement = $('<div class="row"></div>').appendTo(container); 
 
     for (var column = 0; column < columns; column++) { 
 
     relement.append('<div class="square">test</div>'); 
 
     } 
 
    } 
 
    } 
 
</script>

私は:-P

・ホープ、このことができます...ここで何が起こっているのか理解するためのOPのための練習としてそれを残します！