How to switch design for each cards in django templates - django

Question

How to switch between different card designs for each data in the for loop.
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
These three cards have different designs, Currently facing trouble in switching these cards for each loop in the Django template.
{% for cont in data %}
{% ifequal forloop.counter|divisibleby:"3" True %}
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
{% endifequal %}
{% ifequal forloop.counter|divisibleby:"2" True %}
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
{% endifequal %}
{% ifnotequal forloop.counter|divisibleby:"2" True %}
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
{% endifnotequal %}
{% endfor %}
Third card logic is wrong. I need to change this logic so that for each loop each cards need to be displayed alternatively. And another challenge is that after 3 loop it should close the section, since in a row only 3 cards are allowed.
<section class="section-tours" id="section-tours">
{% ifequal forloop.counter|divisibleby:"3" True %}
{% endifequal %}
{% ifequal forloop.counter|divisibleby:"2" True %}
{% endifequal %}
{% ifequal forloop.counter|divisibleby:"2" True %}
{% endifequal %}
</section>

Answer 1

You can use build in django cycle template tag for this. You can update your html and add the cycle template tag like below to change design of 1st, 2nd and 3rd card.
{% for cont in data %}
<div class="{% cycle 'col-1-of-3' 'col-2-of-3' 'col-3-of-3' %}">
<div class="card">
...
</div>
</div>
{% endfor %}
I hope this will help you :)

Answer 2

Section is closed after printing 3 cards.
<section class='section-tours' id='section-tours'>
<div class="row">
{% for cont in data %}
{% cycle 'tools/col-1-of-3.html' 'tools/col-2-of-3.html' 'tools/col-3-of-3.html' as tmp silent %}
{% include tmp %}
{% cycle "" "" "</div> </section><section class='section-tours' id='section-tours'>" %}
{% endfor %}
</section>

Answer 3

Test the below code and tell me if it helps, since I have not tested it.
I have sliced the for loop for first three values, if you want to repeat the same change the slice for same code.
{% for cont in data|slice:":3" %} #i have sliced it for first three values only
{% if forloop.first %}
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
{% endif %}
{% ifequal forloop.counter|divisibleby:"2" True %}
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
{% endifequal %}
{% if forloop.last %}
<div class="col-1-of-3">
<div class="card">
...
</div>
</div>
{% endif %}
{% endfor %}