Is it possible to extend one of the grandchild elements to 100% width in CSS Grid while the parent container is divided into 3 fractions?
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container > div {
background-color: #4834d4;
width: 100%;
}
.container > div .child_01 {
background-color: #f9ca24;
width: 80%;
height: 50px;
margin: 1rem auto;
}
.container > div .child_02 {
background-color: #eb4d4b;
width: 80%;
height: 50px;
margin: 1rem auto;
}<div class="container">
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
</div>My goal is to achieve a layout similar to this: desired layout
Would it be feasible to accomplish this using CSS Grid?