title: Reactjs Grid layout with defined number of columns
body: <p>How can I implement a grid / card layout using javascript that has the following format:</p>
  
  <pre><code>&lt;div class='x'&gt;
    &lt;div class='y'&gt;&lt;/div&gt;
    &lt;div class='y'&gt;&lt;/div&gt;
    &lt;div class='y'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='x'&gt;
    &lt;div class='y'&gt;&lt;/div&gt;
    &lt;div class='y'&gt;&lt;/div&gt;
    &lt;div class='y'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The items of the column containers are retrieved by mapping over an array like so in a <em>FileList</em> component:</p>
  
  <pre><code>data.files.map(file =&gt; (
    &lt;FileItem
      key={file.id}
      file={file}
      refresh={() =&gt; refetch()}
    /&gt;
  ))
  </code></pre>
  
  <p>I can pass in the <code>&lt;div class='y'&gt;</code> within the <em>FileItem</em> component. 
  I just don't know how to implement the logic of the row container.</p>
  
  <p>Essentially I want this:</p>
  
  <pre><code>&lt;div class='x'&gt;
    &lt;div class='y'&gt;FileItem 1&lt;/div&gt;
    &lt;div class='y'&gt;FileItem 2&lt;/div&gt;
    &lt;div class='y'&gt;FileItem 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='x'&gt;
    &lt;div class='y'&gt;FileItem 4&lt;/div&gt;
    &lt;div class='y'&gt;FileItem 5&lt;/div&gt;
    &lt;div class='y'&gt;FileItem 6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>