title: Responsive Tetris grid using div tags
body: <p>I am trying to build a Tetris game using javaScript and HTML without any tutorial. My methods are very primitive. I am making my grid using div tags. The problem is that it is not as responsive as I expected.</p>
  
  <p>This is one row from my grid:</p>
  
  <pre><code>                &lt;div class="row"&gt;
                  &lt;div id="sq1" class="square fender"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq2" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq3" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq4" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq5" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq6" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq7" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq8" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq9" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq10" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq11" class="square free"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div id="sq12" class="square fender"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I am using this style for each square:</p>
  
  <pre><code>.square {
  float: left;
  width: 6%;
  padding-bottom: 6%; 
  border-top: 1px solid black;
  border-left: 1px solid black;}
  </code></pre>
  
  <p>But my squares are changing into rectangles when I resize page. I also use similar smaller grid for showing the next piece. It is surrounded by other tags, which probably deforms it. (The whole project is on <a href="https://codepen.io/radekjohn/pen/eebbNP" rel="nofollow noreferrer">codepen</a>.)</p>
  
  <p>Is there some easy way to make my squares square? I found several ways how to make responsive square, but none of them worked for me.</p>