Bootstrap grid not breaking down into even columns

Question

I am trying to set up a bootstrap grid for my projects section of my portfolio page. I want to make 3x3 grid that is mobile responsive and breaks down into a 2 column grid and then a 1x6 grid.

The problem is: in a medium viewport, the grid breaks down into uneven columns: the top row has 2 items, the next row has 1 item and the one after that has 2 and so on. I would like the 3x3 grid to break down into a 2 column grid wherein the first 4 rows have two items, and the last row has one item.

I have looked at similar questions and I have found no conflicting CSS that could mess with the bootstrap grid system. I have played with different md, sm, lg settings and have gotten the same or a worse result.

Here is my html:

<div class="container">
    <div class="row">
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
        <div class="col">
            <div class="tile"></div>
        </div>
    </div>
</div>

here is my CSS:

.tile {
  height: 200px;
  width: 150px;
  background-color: green;
  [enter image description here][1]margin-bottom: 20px;
}

Here is a codepen showing the grid with the undesired effect: https://codepen.io/wileybb/pen/mYXoxJ

Thank you!

Answer 1

Try removing each individual row like this:

Also adding a width value to your column could really help you achieve the layout you want.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
        <div class="col-lg-4 col-md-3">
            <div class="tile"></div>
        </div>
    </div>
</div>

Fiddle example:

 .tile { height: 200px; width: 150px; background-color: green; margin-bottom: 20px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> <div class="col-lg-4 col-md-3"> <div class="tile"></div> </div> </div> </div>