I wanted to share my approach without delving into your design specifics.
Here's how mine turned out
Instead of organizing the cards in a table, I suggest using columns like in Google Keep. Each card within a column has the same width, making it easier to distribute them among the columns.
Below is the HTML template I used:
{% load mod_filter %}
<div class="content" align="center">
{% for counter in "0123" %}
<div class="col" style="width:24%; display:inline-block; vertical-align:top;">
{% for item in result %}
{% ifequal forloop.counter|is_in_col:4 forloop.parentloop.counter %}
<div class="card blue-grey darken-1" style="width: 100%;">
<div class="card-content white-text" align="left">
<span class="card-title">Card Title</span>
<p>{{ item.content }}</p>
</div>
<div class="card-action" align="left">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
{% endifequal %}
{% endfor %}
</div>
{% endfor %}
</div>
To distribute items based on their indexes, I utilized an is_in_col filter. You'll need to create this filter as well by following these steps.
In your app directory, create a folder named templatetags. Inside, include an empty __init__.py file and mod_filter.py.
Here's the content of mod_filter.py:
from django import template
register = template.Library()
@register.filter
def is_in_col(num, val):
return (num - 1) % val + 1 # forloop counter starts with 1
Don't forget to add your app to the INSTALLED_APPS list in settings.py. After that, restart your server. Adjusting the number of columns should be straightforward.
There's one drawback in my design. If some cards are longer than others, certain columns may end up significantly longer due to equal distribution of the cards.