Flexbox: display elements with number of columns and rows given
<p>I have an empty <code>div</code>.</p>

<pre><code>&lt;div id="container"&gt;&lt;/div&gt;
</code></pre>

<p>With the following <code>CSS</code>:</p>

<pre><code>#container{
    display: flex;
    position: relative;
    flex-flow: row wrap;
    width: 100%;
}
</code></pre>

<p>In which I want to insert more <code>divs</code> via <code>JavaScript</code> but let the user choose how many rows and columns the container will have.</p>

<p>At the moment this is the code I have:</p>

<pre><code>var container = document.getElementById('container');

var rows = prompt("How much lines do you want?");
var columns = prompt("And how much columns do you want?");

for(var i = 0; i &lt; rows; i++){
   for(var j = 0; j &lt; columns; j++){
      var div = document.createElement("div");
      div.classList.add("square");
      div.innerHTML="&lt;p&gt;" + i + "&lt;/p&gt;";
      container.appendChild(div);
   }
}
</code></pre>

<p>where <code>square</code> class has the following:</p>

<pre><code>.square{
    flex: 1;
    height: 50px;
}
</code></pre>

<p>but all the divs inside the container are displayed in one row. </p>

<p>What I want to do is to set the <code>divs</code> inside the container with the same dimensions that the user inputs, but I cannot get it.</p>

<p>Is it possible to set these <code>divs</code> inside the container as rows/columns given by the user? </p>

<p><strong>Note:</strong> As you can see, I am <strong>only</strong> using <code>JavaScript</code> and I would like to keep it, so please avoid answers with plugins/libraries/etc.</p>