Display content with grid

Question

I'm new to front end design and I would like someone to help me with a grid setup that I can't figure it out. I would like to setup boxes with display: grid function as shown in the example image. Those boxes will later contain content. Can Someone please help me because I can't figure it out.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    }
    
.container {
    width: 80%;
    margin: 0 auto;
}

.grid {
    padding: 50px 0;
    display: grid; 
    grid-gap: 15px;
}

.box_a {
    background: gray;
    padding: 20px 40px;
}

.box_b {
    background: black;
    color: white;
    padding: 20px 40px;
    
}

.box_c {
    padding: 20px 40px;
    background: lightblue;
}

.b1 {
    grid-area: 1 / 1 / 2 / 2;
}

.b2 {
    grid-area: 1 / 2 / 2 / 5;
}

.b3 {
    grid-area: 2 / 1 / 3 / 5;
}

.b4 {
    grid-area: 3 / 1 / 2 / 5;
}

.b5 {
    grid-area: 3 / 1 / 4/ 5;
}

 <section class="main">
        <div class="container grid">
            <div class="box_a b1">
                <h2>What we do</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
                <a href="#">Povezava nekam</a>
            </div>

            <div class="box_b b2">
                <h2>How we do it</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
                <a href="#">Povezava nekam</a>
            </div>

            <div class="box_c b3">
                <div class="post_top">
                    <a href="#">Povezava prispevka</a>
                    <h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
                </div>
                <div class="post_bottom">
                    <h2>Nek podnaslov</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
                </div>
            </div>

            <div class="box_a b4">
                <a href="#">Povezava nekam</a>
                <h2>Lorem Ipsum</h2>
                <a href="#">Preberi več</a>
            </div>

            <div class="box_b b5">
                <a href="#">Povezava nekam</a>
                <h2>Nek srednje dolg naslov</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
            </div>
        </div>
    </section>

Answer 1

You can simplify your grid like below without the need of grid-areas:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.grid {
  padding: 50px 0;
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 15px;
}

.box_a {
  background: gray;
  padding: 20px 40px;
}

.box_b {
  background: black;
  color: white;
  padding: 20px 40px;
}

.box_c {
  padding: 20px 40px;
  background: lightblue;
}

.b2,.b5 {
  grid-column:2/span 2;
}

.b3 {
  grid-column:1/span 3;
}

<section class="main">
  <div class="container grid">
    <div class="box_a b1">
      <h2>What we do</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_b b2">
      <h2>How we do it</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_c b3">
      <div class="post_top">
        <a href="#">Povezava prispevka</a>
        <h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
      </div>
      <div class="post_bottom">
        <h2>Nek podnaslov</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
      </div>
    </div>

    <div class="box_a b4">
      <a href="#">Povezava nekam</a>
      <h2>Lorem Ipsum</h2>
      <a href="#">Preberi več</a>
    </div>

    <div class="box_b b5">
      <a href="#">Povezava nekam</a>
      <h2>Nek srednje dolg naslov</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
    </div>
  </div>
</section>

Relevant code:

.grid {
  ...
  grid-template-columns:1fr 1fr 1fr; /*define 3 columns*/
  ..
}

.b2,.b5 {
  grid-column:2/span 2; /*take 2 colmuns starting from 2*/
}

.b3 {
  grid-column:1/span 3; /*take 3 columns starting from 1*/
}

Answer 2

Your grid-areas are a bit messed up - change your grid-area definitions for b4 to grid-area: 3 / 1 / 4 / 2 and b5 to grid-area: 3 / 2 / 4/ 5.

Note the usage of grid-area when using grid lines:

If four values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value.

MDN

See corrected demo below:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.grid {
  padding: 50px 0;
  display: grid;
  grid-gap: 15px;
}

.box_a {
  background: gray;
  padding: 20px 40px;
}

.box_b {
  background: black;
  color: white;
  padding: 20px 40px;
}

.box_c {
  padding: 20px 40px;
  background: lightblue;
}

.b1 {
  grid-area: 1 / 1 / 2 / 2;
}

.b2 {
  grid-area: 1 / 2 / 2 / 5;
}

.b3 {
  grid-area: 2 / 1 / 3 / 5;
}

.b4 {
  grid-area: 3 / 1 / 4 / 2; /* CHANGED */
}

.b5 {
  grid-area: 3 / 2 / 4 / 5; /* CHANGED */
}

<section class="main">
  <div class="container grid">
    <div class="box_a b1">
      <h2>What we do</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_b b2">
      <h2>How we do it</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_c b3">
      <div class="post_top">
        <a href="#">Povezava prispevka</a>
        <h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
      </div>
      <div class="post_bottom">
        <h2>Nek podnaslov</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
      </div>
    </div>

    <div class="box_a b4">
      <a href="#">Povezava nekam</a>
      <h2>Lorem Ipsum</h2>
      <a href="#">Preberi več</a>
    </div>

    <div class="box_b b5">
      <a href="#">Povezava nekam</a>
      <h2>Nek srednje dolg naslov</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
    </div>
  </div>
</section>