title: How to tile divs independently in grids regardless of the max size of of a div in a row?
body: <p>I want to tile an image like : <a href="https://i.stack.imgur.com/ISUkS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ISUkS.png" alt="this" /></a>  What I end up with is :<a href="https://i.stack.imgur.com/ghAHe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ghAHe.png" alt="this" /></a>.<br />
  This is my HTML, CSS and JavaScript code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = newWindow ;
  
  function newWindow() {
      var data = JSON.parse(phrases);
      console.log(data);
  
      for (let i = 0 ; i &lt; data.length ; i++) {
          let column = document.createElement("DIV"); 
          column.className = "column";
          let card = document.createElement("DIV");
          var br = document.createElement("br");
          card.className = "card";
  
          let theme =  `theme : ` + data[i].theme;
          let content = document.createTextNode(theme)
          card.appendChild(content);
          card.appendChild(br);
  
          var br1 = document.createElement("br");
  
          let sourceText = `sourceText : ` + data[i].sourceText;
          content = document.createTextNode(sourceText);
          card.appendChild(content);
          card.appendChild(br1);
  
          var br2 = document.createElement("br");
  
          let translation = `translation : ` + data[i].translation;  
          content = document.createTextNode(translation);
          card.appendChild(content);
          card.appendChild(br2);
  
          column.appendChild(card);
          document.getElementById("cards-container").appendChild(column);
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: Arial, Helvetica, sans-serif;
  }
  .row{
      display: grid;
      grid-template-columns: 33% 33% 33%;
  }
  .column {
      margin: 10px;
  }
  
  .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 10px;
      text-align: center;
      background-color: #f1f32f;
  }
  .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang&gt;
      &lt;head&gt;
      &lt;title&gt;Greeting Cards&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="./scripts.js"&gt;&lt;/script&gt; 
          &lt;script type="text/javascript" src="Phrases.json"&gt;&lt;/script&gt;
      &lt;/head&gt;
   
      &lt;body&gt;
      &lt;div id="cards-container" class="row"&gt;
  
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The data comes from an external <code>JSON</code> file which I successfully parsed.   <strong>How can I adjust my CSS so that I can tile my <code>div</code>s in columns regardless of the maximum size of the <code>div</code> in a row like in the first image?</strong><br />
  <strong>I need 3 columns.</strong><br />
  My question is strictly about positioning the elements like in the first image. I want a solution in vanilla JavaScript and/or JQuery and CSS and HTML and not any other frameworks like Bootstrap.</p>