How can I achieve this kind of layout with Bootstrap 5? - html

Question

I want to achieve a layout using Boostrap 5 and I'm failing to do so.
This is the layout which I want to have:
layout example
This is the layout that I have: https://jsfiddle.net/7rpmqsc0/
This is my mark up:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
<img data-src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
<div class="row">
<div class="col-6">
<img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
<div class="col-6">
<img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
</div>
<div class="col-6">
<img data-src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
My problem is that I can't achieve a gap between rows where the images meet on the left side. Maybe I am missing something silly but I can't figure it out. Thank you for your help

Answer 1

You can rethink the structure with 2 col side by side where one olds also two columns with the smaller img.:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<!--left col also styled as a row -->
<div class="col-6 row">
<!-- first row of that col -->
<img src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
<!-- second row of that col with 2 col-6 -->
<div class="col-6 mt-auto">
<img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
<div class="col-6 mt-auto">
<img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
<!-- right column -->
<div class="col-6">
<img src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>