I have a grid layout with 4 elements that should have a specific place in desktop and mobile sizes and it's ok besides the masonry. the third and fourth elements are not near to each other!
see jsfiddle example: https://jsfiddle.net/amnshojaei/0krpufxa/6/
<div class="grid grid-cols-12 gap-[24px]">
<div class="h-[200px] col-span-full lg:col-start-1 lg:col-end-9 lg:row-start-1 lg:row-end-2">1</div>
<div class="h-[200px] col-span-full lg:col-start-1 lg:col-end-9 lg:row-start-2 lg:row-end-3">2</div>
<div class="h-[100px] col-span-full lg:col-start-9 lg:col-end-13 lg:row-start-1 lg:row-end-2">3</div>
<div class="h-[100px] col-span-full lg:col-start-9 lg:col-end-13 lg:row-start-2 lg:row-end-3">4</div>
</div>
I want to have something like this with auto height elements:
