使用卡片设计 Material Design Lite Grid，使其看起来像 Google Keep

Question

我将 Django 与 Material Design Lite 结合使用。

我已经完成了一个响应式布局，其中我生成的卡片随屏幕宽度缩放。

这是渲染 HTML 的 sn-p，移除了一些卡片以保持可读性。

<main class="mdl-layout__content">
    

    <div class="mdl-grid">
        
        <!-- Start of card !-->
          <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone ">
        <div class="stories mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__supporting-text">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;&quot;Lorem ipsum dolor sit amet, consectetur adipiscing e</h2>
      </div>
      <div class="mdl-card__title-text">
        Tales
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
        href="/1/details">View details</a>
    </div>
    </div>
        </div>
        <!-- End of card !-->

        
        <!-- Start of card !-->
          <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone ">
        <div class="stories mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__supporting-text">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;&quot;Lorem ipsum dolor sit amet, consectetur adipiscing e</h2>
      </div>
      <div class="mdl-card__title-text">
        fezfez
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
        href="/2/details">View details</a>
    </div>
    </div>
        </div>
        <!-- End of card !-->

        
        <!-- Start of card !-->
          <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone ">
        <div class="stories mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__supporting-text">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;&quot;Lorem ipsum dolor sit amet, consectetur adipiscing e</h2>
      </div>
      <div class="mdl-card__title-text">
        ffffum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
        href="/3/details">View details</a>
    </div>
    </div>
        </div>
        <!-- End of card !-->

      
        
        <!-- Start of card !-->
          <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone ">
        <div class="stories mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__supporting-text">ff</h2>
      </div>
      <div class="mdl-card__title-text">
        fze
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
        href="/34/details">View details</a>
    </div>
    </div>
        </div>
        <!-- End of card !-->
    </div>

    </main>

未编译的 HTML：

  <div class="mdl-grid">
        {% for story in all_stories_list %}
        <!-- Start of card !-->
          <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone ">
        <div class="stories mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__supporting-text">{{story.story_plot}}</h2>
      </div>
      <div class="mdl-card__title-text">
        {{story.story_name}}
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
        href="/{{story.id}}/details">View details</a>
    </div>
    </div>
        </div>
        <!-- End of card !-->

        {% endfor %}

这是 CSS：

.stories {
  margin-bottom: 20px;
  width:auto;
}

.mdl-card__title {
  background-color: #156767;

}

.mdl-card__title-text {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
}
.mdl-card__supporting-text{
  color:white;
}

我现在想要完成的是卡片之间在垂直方向上具有相同数量的空间，因此卡片之间存在固定的空白。我将如何做到这一点？我不知道从哪里开始。

Answer 1

虽然我没有阅读您的设计，只是想分享一下我是如何做到的。

How mine looks

我刚刚查看了 Google Keep，我相信这就是您要查找的内容。主要思想不是将卡片放在桌子上，而是放在某些列中。列内的所有卡片实际上都具有相同的宽度，那么我们可以将卡片分布在列之间。

首先，我的html模板：

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

我使用is_in_col 过滤器根据它们的索引分配项目。您还需要创建此过滤器。在你的应用中创建一个名为templatetags的文件夹，在里面创建一个空的__init__.py和mod_filter.py。

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

确保您的应用在INSTALLED_APPS 中放入settings.py。之后重新启动您的服务器。换成其他列数应该很容易。

不过，我的设计存在缺陷。由于它将相同数量的卡片分隔到每列中，如果其中一些较长并且您不走运，则某些列可能会比其他列长得多。