How to make grid text use multiple columns - html

Question

For a school project, I need to use a grid. I want to change the position of some articles with text. Can anyone help me? I don't understand how columns work and how to make article 1 the biggest one for example. See my image where I explain how the articles need to be positioned.
.
For example, the second article needs to be displayed, and then the first one.
.product-text {
display: grid;
grid-template: [row1-start] "grid-area2 grid-area1 grid-area3" 50% [row1-end]
/* [row2-start] "grid-area6" 25% [row2-end] */
/* [row3-start] "grid-area5" 25% [row3-end] */
/* [row4-start] "grid-area1" 25% [row4-end] */
/33%;
}
.story {
grid-area: grid-area1;
color: #B12293;
}
.problem {
grid-area: grid-area2;
color: #2297B1;
}
.use {
grid-area: grid-area3;
color: #44CB5F;
}
.users {
grid-area: grid-area4;
color: #4452CB;
}
.expectations {
grid-area: grid-area5;
color: #CB444C;
}
.future {
grid-area: grid-area6;
color: #593E3F;
}
<section class="product-text">
<article class="story">
<p><strong> Story about the innovation: </strong> </p>
<p>The development of our product began in 2016. We created this company with love and passion. </p>
<p>We wanted to create a thing were people can see the data of shoes. To be specific runnin shoes. </p>
<p>With this data we can help a lot of people to determine which type of running shoes they need </p>
<p>We worked for 3 years on this innovation, with a lot of testing we came with the right product. </p>
</article>
<article class="problem">
<p><strong> What problem does this solve? </strong> </p>
<p>The type of shoes you have, do have a lot of impact on how you run. With this innovation you can </p>
<p>choose the best shoes made for you, so you can be the best of yourself. </p>
<p>Poeple can set their own personal records when running the right type of shoes. </p>
<p>Btw, It is way better for your feet when walking on the right type of shoes. You won't get any blisters. </p>
</article>
<article class="use">
<p> <strong> How to use this innovation? </strong> </p>
<p>There is a treadmill with sensors and a computer connected when using this. </p>
<p>A person puts on some running shoes and will walk a couple of times up and down. </p>
<p>The computer connected will collect data and there you will see how you place your foot and shoe. </p>
<p>On the computer it will suggest if you need softer or harder shoes based on the algoritm</p>
</article>
<article class="users">
<p> <strong> Who will use this innovation?</strong> </p>
<p>A lot of people can use this innovation. The age is most of the time between 15-60.</p>
<p>Since running is a populur type of sport, we will have a lot of clients. </p>
<p>We have some collabs in the future with celebrities. This way we can promote this product. </p>
<p>This month we will have a collab with a famous Canadian singer. </p>
<p>We will update very soon when we have more information. </p>
</article>
<article class="expectations">
<p> <strong> What can be expected from our company?</strong> </p>
<p>Anyone can walk in our store to use the innovation. We will kindly massure your shoes and which type you need. </p>
<p>With in 10 minutes we have all the data you need to buy the perfect shoes. </p>
<p>Our employies are always there for you and can answer anything. So you won't have any questions. </p>
<p>On our contact page you can see the opening times and much more. </p>
</article>
<article class="future">
<p> <strong> What is the future of this innovation? </strong> </p>
<p>We are constantly trying to improve this product. With the help of our programmers, we can make it more accurate. </p>
<p>Since our product is getting bigger and bigger, we will open more locations in and outside of The Netherlands.</p>
<p>This way, more people can massure there foot and shoes to buy the best shoes for them. </p>
<p>In 5 years, the company will be 5 times larger from our calculations.</p>
</article>
</section>

Answer 1

Writing the grid-are-templates clean will solve it for you already (see the grid-area-templates in the CSS part):
.product-text {
display: grid;
grid-auto-rows: 1fr; /* makes the rows equal height */
grid-template-areas:
"grid-area2 grid-area1 grid-area3"
"grid-area2 grid-area1 grid-area3"
"grid-area5 grid-area1 grid-area3"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area6 grid-area6";
}
.story {
grid-area: grid-area1;
color: #B12293;
}
.problem {
grid-area: grid-area2;
color: #2297B1;
}
.use {
grid-area: grid-area3;
color: #44CB5F;
}
.users {
grid-area: grid-area4;
color: #4452CB;
}
.expectations {
grid-area: grid-area5;
color: #CB444C;
}
.future {
grid-area: grid-area6;
color: #593E3F;
}
/* added by editor for visualisation purpose */
article {
border: 2px dashed red;
}
<section class="product-text">
<article class="story">
<p><strong> Story about the innovation: </strong> </p>
<p>The development of our product began in 2016. We created this company with love and passion. </p>
<p>We wanted to create a thing were people can see the data of shoes. To be specific runnin shoes. </p>
<p>With this data we can help a lot of people to determine which type of running shoes they need </p>
<p>We worked for 3 years on this innovation, with a lot of testing we came with the right product. </p>
</article>
<article class="problem">
<p><strong> What problem does this solve? </strong> </p>
<p>The type of shoes you have, do have a lot of impact on how you run. With this innovation you can </p>
<p>choose the best shoes made for you, so you can be the best of yourself. </p>
<p>Poeple can set their own personal records when running the right type of shoes. </p>
<p>Btw, It is way better for your feet when walking on the right type of shoes. You won't get any blisters. </p>
</article>
<article class="use">
<p> <strong> How to use this innovation? </strong> </p>
<p>There is a treadmill with sensors and a computer connected when using this. </p>
<p>A person puts on some running shoes and will walk a couple of times up and down. </p>
<p>The computer connected will collect data and there you will see how you place your foot and shoe. </p>
<p>On the computer it will suggest if you need softer or harder shoes based on the algoritm</p>
</article>
<article class="users">
<p> <strong> Who will use this innovation?</strong> </p>
<p>A lot of people can use this innovation. The age is most of the time between 15-60.</p>
<p>Since running is a populur type of sport, we will have a lot of clients. </p>
<p>We have some collabs in the future with celebrities. This way we can promote this product. </p>
<p>This month we will have a collab with a famous Canadian singer. </p>
<p>We will update very soon when we have more information. </p>
</article>
<article class="expectations">
<p> <strong> What can be expected from our company?</strong> </p>
<p>Anyone can walk in our store to use the innovation. We will kindly massure your shoes and which type you need. </p>
<p>With in 10 minutes we have all the data you need to buy the perfect shoes. </p>
<p>Our employies are always there for you and can answer anything. So you won't have any questions. </p>
<p>On our contact page you can see the opening times and much more. </p>
</article>
<article class="future">
<p> <strong> What is the future of this innovation? </strong> </p>
<p>We are constantly trying to improve this product. With the help of our programmers, we can make it more accurate. </p>
<p>Since our product is getting bigger and bigger, we will open more locations in and outside of The Netherlands.</p>
<p>This way, more people can massure there foot and shoes to buy the best shoes for them. </p>
<p>In 5 years, the company will be 5 times larger from our calculations.</p>
</article>
</section>