I've created an app using Angular where I need to design a grid similar to the image below. The specific requirement is that item 2 should overlap item1, and all items except item1 should span the width of the container element.
https://i.sstatic.net/U48wL.jpg
<div class="item1">
this is item 1
</div>
<div class="item2">
this is item 2
</div>
<div class="item3">
this is item 3
</div>
<div class="item4">
this is item 4
</div>
Do you have any suggestions for CSS to achieve this grid layout?
:host{
height: 100vh;
display: grid;
}