title: 2 cols in first row and thereafter 3 cols in each row using css grid
body: <p>i am trying to achieve a layout which have 2 cols in first row and 3 cols thereafter just like attached image. i am using <code>css grid</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/GWXOQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GWXOQ.png" alt="i want to achieve this layout"></a></p>
  
  <p>Here is my code so far</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-css lang-css prettyprint-override"><code>body {
    background: #161616;
    color: #bdbdbd;
    font-weight: 300;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Helvetica neue, roboto;
  }
  
  h1 {
    font-weight: 300;
  }
  a {
    color: white;
    text-decoration: none;
    color: #4d4d4d;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
  .feature__item {
    background-color: #C4C4C4;
    padding: 15px;
    color: #4d4d4d;
  }
  
  .feature__item:first-of-type{
    grid-column-start: 1;
    grid-column-end: 3;
  }
  
  .feature__item:nth-child(2) {
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="feature__item"&gt;
      &lt;h5&gt;Heading&lt;/h5&gt;
      &lt;p&gt;12&lt;/p&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Discover More&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="feature__item"&gt;
      &lt;h5&gt;Heading&lt;/h5&gt;
      &lt;p&gt;34&lt;/p&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Discover More&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="feature__item"&gt;
      &lt;h5&gt;Heading&lt;/h5&gt;
      &lt;p&gt;56&lt;/p&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Discover More&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="feature__item"&gt;
      &lt;h5&gt;Heading&lt;/h5&gt;
      &lt;p&gt;78&lt;/p&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Discover More&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="feature__item"&gt;
      &lt;h5&gt;Heading&lt;/h5&gt;
      &lt;p&gt;90&lt;/p&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Discover More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the working example on <a href="https://playcode.io/360387?tabs=index.html,preview,console" rel="nofollow noreferrer">Playcode</a></p>