Currently, I am in the process of setting up a responsive bootstrap grid for the projects section on my portfolio page. My goal is to create a 3x3 grid that adjusts seamlessly for mobile devices and breaks down into a 2-column grid and eventually a 1x6 grid.
However, I have encountered an issue where, on a medium-sized viewport, the grid layout becomes uneven with rows containing varying numbers of items. What I actually want is for the 3x3 grid to transition into a 2-column grid where the first four rows contain two items each, and the last row contains one item.
I have carefully reviewed similar questions but found no conflicting CSS that could potentially disrupt the bootstrap grid system. Despite experimenting with different settings for md, sm, lg, the outcome remains unchanged or even worse.
Below is the HTML code snippet:
<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>
This is how my CSS looks like:
.tile {
height: 200px;
width: 150px;
background-color: green;
margin-bottom: 20px;
}
You can also view the undesirable effect of the grid layout in action on this CodePen link.
Thank you for your help!