I'm currently working on a website project that involves displaying images in a specific grid format. To achieve this, I am utilizing Laravel and Bootstrap.
The primary objective is to create a grid layout with spacing that maintains the height of the images. However, I encountered an issue when attempting to add a border to create space between the divs. This resulted in a border appearing not only to the right but also at the bottom of the first two divs, causing them to have a smaller height compared to the last one:
Image: https://gyazo.com/9bd97d19073a123966a652e3603ebfd4
[![The first two rectangles display a border bottom in addition to the border right]
For reference, this is the type of grid I am aiming to achieve: https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17
Below is the code I have implemented thus 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'm puzzled as to why adding a border-right also results in a border-bottom. I attempted using margin instead, but it caused the larger image to extend beyond the row boundary:
Here is a visual of the issue: https://gyazo.com/5a785de16398756021dd843ba038cbc6
If anyone could provide guidance on how to achieve the desired outcome, it would be greatly appreciated. https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17