[Fixed]-Design Material Design Lite Grid with cards to look like Google Keep

by

1👍

✅

I did not read through your design though, just wanted to share how I did it.

How mine looks

I just checked Google Keep, I believe it is what you’re looking for. The main idea is not to put the cards in a table, but in some columns. All the cards within the column in fact has the same width, then we can just distribute the cards among the columns.

First, my html template:

{% 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>

I used an is_in_col filter to distribute the items according to their indexes. You need to create this filter too. Create a folder called templatetags in your app, create an empty __init__.py and mod_filter.py inside.

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

Make sure you have your app put in INSTALLED_APPS in settings.py. Restart your server after that. It should be easy to change to other numbers of column.

There is a flaw in my design though. As it separates the same number of cards into each column, if some of them are longer and you’re unlucky, some of the columns can get much longer than others.

👤hkchengrex

Leave a comment