title: Grid Columns Without Rows?
body: <p>I'm trying to create a 3 column layout using the CSS Grid spec but I'm running into an issue with rows and element sizing. My columns need to contain an unspecified amount of content with varying heights.</p>
  
  <p>This is my ideal layout: </p>
  
  <p><a href="https://i.stack.imgur.com/3WwQx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3WwQx.png" alt="enter image description here"></a></p>
  
  <p><strong>Problems:</strong></p>
  
  <p><strong>1)</strong> If I tell element A and B to use row 1, column 1 then they stack on top of one another rather than B below A.</p>
  
  <p><strong>2)</strong> If I specify element B to use the second row, then it gets pushed below element C due to element C making row 1 tall.</p>
  
  <p><a href="https://i.stack.imgur.com/eS7T9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eS7T9.png" alt="enter image description here"></a></p>
  
  <p><strong>3)</strong> If I specify element B to use the second row, then element A stretches to fill row 1.</p>
  
  <p><a href="https://i.stack.imgur.com/1MQRD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1MQRD.png" alt="enter image description here"></a></p>
  
  <p>Is there any way to get elements to behave like in the first picture?</p>
  
  <p>The only solution I know of is to create "scaffolding" divs inside the columns like this:</p>
  
  <pre><code>&lt;div class="grid"&gt;
      &lt;div class="col"&gt;
          &lt;div class="itemA"&gt;&lt;/div&gt;
          &lt;div class="itemB"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
          &lt;div class="itemC"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
          &lt;div class="itemD"&gt;&lt;/div&gt;
          &lt;div class="itemE"&gt;&lt;/div&gt;
          &lt;div class="itemF"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I dislike doing that and I thought the grid spec was supposed to allow for layout creation without scaffolding.</p>
  
  <p><strong>Questions:</strong></p>
  
  <p><strong>1)</strong> Is there any way to prevent elements from stretching to fill the row vertically?</p>
  
  <p><strong>2)</strong> Is it possible to put two elements on the same row and have them appear one below the other instead of conflicting?</p>
  
  <p>Here's my 2 pens where I'm attempting to find a solution with and without scaffolding:</p>
  
  <p><a href="https://codepen.io/Andronomos/pen/zapVYo?editors=1100" rel="noreferrer">Without scaffolding</a></p>
  
  <p><a href="https://codepen.io/Andronomos/pen/ERoBEb?editors=1100" rel="noreferrer">With scaffolding</a></p>