I am building a website to display images in an specific grid. I am using Laravel and Bootstrap for this project.
The goal is to create a grid with spacing that maintains the images heights. To create a space between the divs I added a border right to the images, but when I do that it also creates a border bottom at the first two divs, which makes the first two images have a smaller height than the last one.:
Image: https://gyazo.com/9bd97d19073a123966a652e3603ebfd4
[![As you can see the first two rectangles have a border bottom instead of just the border-right]
For reference this is the kind of grid that I am trying to create: https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17 https://www.zarahome.com/pt/%C3%BAltima-semana/cole%C3%A7%C3%A3o-c1020095502.html
This is the code I have so far:
<div class="row g-0 mx-0">
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
</div>
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid style="border-right: 10px solid white;">
</div>
<div class="col-md-6">
<img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
</div>
</div>
I simply dont understand why adding a border-right also adds a border-bottom. I tried adding a margin instead but this causes the bigger image to jump out of the row, like so:https://gyazo.com/5a785de16398756021dd843ba038cbc6
Could someone help me to achieve this result? https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17
A coleague helped me achieve the best solution, so I will post what sworked in case someone faces the same issue:
<div class="d-row d-flex gap-2 justify-content-center" style="margin-bottom: 100px">
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid">
</div>
</div>