title: CSS Grid - Number of Columns can be different in the first row than second row
body: <p>I am trying to understand how to achieve a layout that takes two columns in the first row and three columns in the second row, third row, and so on.</p>
  
  <pre><code>&lt;section&gt;
     &lt;div&gt;1&lt;/div&gt;
     &lt;div&gt;2&lt;/div&gt;
     &lt;div&gt;3&lt;/div&gt;
     &lt;div&gt;4&lt;/div&gt;
     &lt;div&gt;5&lt;/div&gt;
     &lt;div&gt;6&lt;/div&gt;
     &lt;div&gt;7&lt;/div&gt;
     &lt;div&gt;8&lt;/div&gt;
  &lt;/section&gt;
  
  //CSS
  section {
     display: grid;
     grid-template-columns: 1fr 1fr;
  }
  </code></pre>
  
  <p>The above code will give me two-column layout but how to modify it to achieve mentioned layout. </p>