title: css grid layout different number of columns in each row
body: <p>I have a grid container like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="a"&gt;A&lt;/div&gt;
      &lt;div class="b"&gt;B&lt;/div&gt;
      &lt;div class="c"&gt;C&lt;/div&gt;
      &lt;div class="d"&gt;D&lt;/div&gt;
      &lt;div class="e"&gt;E&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using <code>grid-template-areas</code> to position them like this:</p>
  
  <pre><code>.container {
      display: grid;
      grid-template-areas:
          'a b .'
          'c d e';
  }
  
  .a {grid-area: 'a';}
  .b {grid-area: 'b';}
  .c {grid-area: 'c';}
  .d {grid-area: 'd';}
  .e {grid-area: 'e';}
  </code></pre>
  
  <p>Which looks like this:</p>
  
  <pre><code>_____________
  | A | B |   |
  | C | D | E |
  </code></pre>
  
  <p>However, I would like the number of columns in each row to be independent of the other rows, so I would like something like this:</p>
  
  <pre><code>grid-template-areas:
      'a b'
      'c d e';
  </code></pre>
  
  <p>and I would like the following result:</p>
  
  <pre><code>_____________
  |  A  |  B  |
  | C | D | E |
  </code></pre>
  
  <p>The code above does not work. The only solution I came up with was to get the lowest common denominator of the number of columns in each row: 2 x 3 = 6. Then I would repeat each area the number of times necessary:</p>
  
  <pre><code>grid-template-areas:
      'a a a b b b'
      'c c d d e e';
  </code></pre>
  
  <p>The problem is that I might have an lcd of two hundred or something, and this would probably be very slow at calculating and rendering.</p>
  
  <p>Is there any way I can achieve this without doing the above? I still need to use one grid layout so that I can completely shift around all the elements when there are different screen sizes, which means I can't just use separate grids for each row.</p>