Search code examples
csslaravelgridbootstrap-5

How to achieve equal spacing in same height columns bootstrap?


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


Solution

  • 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>