I'm attempting to design a 3-column layout where blocks are placed in their respective columns based on their class. Here is an example of what I have in mind: https://i.sstatic.net/0GnUN.png
My initial approach was as follows:
<div class="container">
<div class="type1">type1</div>
<div class="type2">type2</div>
<div class="type2">type2</div>
<div class="type1">type1</div>
<div class="type2">type2</div>
<div class="type3">type3</div>
</div>
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: 'type1 type2 type3';
gap: 20px;
padding: 20px;
}
.type1{
background-color: aqua;
grid-area: type1;
}
.type2{
background-color: forestgreen;
grid-area: type2;
}
.type3{
background-color: salmon;
grid-area: type3;
}
However, the issue with this implementation is that blocks with the same grid-area will be overlapped.
https://i.sstatic.net/2A1hy.png
I'm trying to identify the problem in my code and determine if there's a solution for achieving the desired layout. p.s: The order of the blocks is random since I am dynamically generating them based on data types.