2 cols in first row and thereafter 3 cols in each row using css grid

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 css grid.

Here is my code so far

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) {
  
}

<div class="container">
  <div class="feature__item">
    <h5>Heading</h5>
    <p>12</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>34</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>56</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>78</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>90</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
</div>

Here is the working example on Playcode

Solution

You need to divide your grid into 6 columns to be able to span 3 or 2 of them

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 {
/* instead , align/justify */ margin:auto;
  display: grid;
  grid-template-columns:repeat(6,1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.feature__item {
  background-color: #C4C4C4;
  padding: 15px;
  color: #4d4d4d;
  grid-column : span 2;
}

.feature__item:first-of-type,

.feature__item:nth-child(2) {
  grid-column: span 3;
  
}

<div class="container">
  <div class="feature__item">
    <h5>Heading</h5>
    <p>12</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>34</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>56</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>78</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
  <div class="feature__item">
    <h5>Heading</h5>
    <p>90</p>
    <a href="#" class="btn btn-primary">Discover More</a>
  </div>
</div>