{% for plant in plants %}
{% if forloop.counter0|divisibleby:3 %}
<div class="row row-cols-3">
{% endif %}
{% include 'included/_plant_cell.html' %}
{% if forloop.counter|divisibleby:3 %}
</div>
{% endif %}
{% endfor %}
_plant_cell.html:
<div class="plant-cell card col-md-4 m-1">
<div class="card-body">
<div class="card-text">
{{ plant.name }}
</div>
</div>
</div>
the issue arises when the code generates rows with only two cards each, and the third one is pushed to the next line (removing margin m-1 fixes this), leading to a pattern of two cards per row followed by one. The expectation is to have three cards in each row.
I hope to resolve this layout issue soon.