My Django template has a structure similar to the following:
<div class="container-fluid" style="padding: 25px">
<div class="card-columns">
{% for service in services %}
<div class="card">
<img class="card-img-top img-fluid" src="..." />
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Description</p>
</div>
</div>
{% endfor %}
</div>
</div>
I have successfully made the column count responsive to viewport size using the following CSS:
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
@media (max-width: 48em) {
.card-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
However, I am struggling with getting the card heights to align properly. I've experimented with setting height: 100% on the cards and other solutions for equalizing heights, but they all seem to cause issues.
Many suggest using either card-deck or a combination of row and col, but these options don't fit my needs since the number of items in the services list can vary.
How can I adjust the number of columns based on viewport size, maintain equal row heights, and accommodate a dynamic number of objects within the grid?