Can someone provide guidance on achieving this layout https://ibb.co/Y8TQLcC while maintaining the DOM order? I've been struggling with grid template areas.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
display: grid;
grid-template-areas:
"one three";
"two"
}
.one {
grid-area: one;
border: 1px solid;
}
.three {
grid-area: three;
border: 1px solid;
}
.two {
grid-area: two;
border: 1px solid;
}<div class="parent">
<div class="one">one</div>
<div class="three">three</div>
<div class="two">two</div>
</div>