Display content with grid - html

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>
Povezava nekam
</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>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<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">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<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>
Povezava nekam
</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>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<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">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<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>
Povezava nekam
</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>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<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">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>