https://i.sstatic.net/awwxE.png
Looking at the image provided, I am seeking a way to make the top left image occupy the entire height just like the neighboring div in the first row of the grid. Is there a way to achieve this?
The desired outcome should be similar to the following:
https://i.sstatic.net/helxs.jpg
I am utilizing vue-js and Bootstrap classes for styling. No inline styling is present, so only the template code is shared. Feel free to use it within the <style> section. The code relevant to row1 can be found below (disregard the row2 code)
<div class="container justify-content-center">
<heading
:heading-text="title"
:view-all="viewAllText"
:view-all-link="viewAllLink"
/>
<!-- row1 -->
<div class="row row-cols-2 justify-content-center align-items-center">
<div
v-for="(banner, index) in gridCollection.slice(2, 4)"
:key="index"
class=" p-1 px-2"
:class="`col-${4*(index+1)}`"
>
<fdk-link :link="`/collection/${banner.name}`">
<img
class="img-fluid object-fit-contain rounded-3"
:src="banner.image.landscape"
alt="Image"
/>
</fdk-link>
</div>
</div>
<!-- row2 -->
<div class="row row-cols-3 justify-content-center align-items-center">
<div
v-for="(banner, index) in gridCollection.slice(3, 6)"
:key="index"
class="col p-1 px-2"
>
<fdk-link :link="`/collection/${banner.name}`">
<img
class="img-fluid object-fit-contain rounded-3"
:src="banner.image.landscape"
alt="Image"
/>
</fdk-link>
</div>
</div>
</div>