On my webpage, I have a section where I display cards of specific sizes (250*250). I want to show a maximum of 4 cards per row, stacking them on smaller viewports. Currently, the layout works fine with 4 or more cards, with the excess automatically moving to the next line. However, the issue arises when there are fewer than 4 cards (which can happen since the cards are generated at runtime from a database in a Rails application).
I am looking for a solution where the cards align themselves within the row while maintaining their size if there are less than 4 cards by adding more margin to the right and left.
For 4 or more cards, here is the design:
https://i.sstatic.net/eq4aX.png
And for less than 4 cards, like 2 cards, the design should look like this:
https://i.sstatic.net/v06P3.png
In terms of alignment issues when only 2 cards are present, it currently looks like this: https://i.sstatic.net/oFoid.png
And for 5 cards, the layout appears as follows: https://i.sstatic.net/OLlei.png
The adjustment in margins is something that can be handled.
Question: How can I ensure that there are always 4 fixed-size columns on large screens, which stack up on smaller devices, dynamically adjusting alignment if there are less than 4 cards in a row?
Here is what has been implemented so far:
HTML
<div class="feature-wrapper pt-5 pb-5 mt-5 mt-lg-0 h-100 ">
<div class="d-flex align-items-center h-100 justify-content-center ">
<div class="row">
<div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
<i class="far fa-plus-square fa-10x"></i>
</div>
<div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
<i class="fas fa-arrow-alt-circle-down fa-10x"></i>
</div>
<div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
<i class="fas fa-arrow-alt-circle-down fa-10x"></i>
</div>
<div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border">
<i class="fas fa-arrow-alt-circle-down fa-10x"></i>
</div>
</div>
</div>
CSS
body,html{
height:100%;
}
.my-card{
height:250px;
width:250px;
background-color:red;
text-align:center;
}