title: How to make smart tiles with html/css?
body: <p>I am making tiles with divs</p>
  
  <p><strong>What I have done:</strong></p>
  
  <pre><code>&lt;html&gt;
  
  &lt;style&gt;
  
  .tile{
      display:inline-block;
      width: 30em;
      height: 30em;
      background-color: #000;
  }
  
  &lt;/style&gt;
  
  &lt;div class = tile&gt;
  &lt;/div&gt;
  
  &lt;div class = tile&gt;
  &lt;/div&gt;
  
  &lt;div class = tile&gt;
  &lt;/div&gt;
  
  &lt;div class = tile&gt;
  &lt;/div&gt;
  
  &lt;div class = tile&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This causes unused space after the edge of the rightmost tiles (as the boxes jumps to the next line).</p>
  
  <p><strong>What I want to do:</strong></p>
  
  <ul>
  <li>The tile size should depend on font size (check)</li>
  <li>The number of tiles per row should depend on window size (check)</li>
  <li>The tiles should fill the window perfectly, from edge to edge (to do)</li>
  </ul>
  
  <p>I thought about something like this (pseudocode):</p>
  
  <pre><code>    width: calc(100% / rounded(100% /30em) );
  </code></pre>
  
  <p>Example: If the window-width divided with desired box-width gives 2,7: Then I want the box-width to be 100%/3.</p>
  
  <p>How can I calculate this with JavaScript and set the width? (I have never used JS before).</p>