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

Question

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

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

这是呈现的 HTML 的片段，其中删除了一些卡片以保持其可读性。

<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

确保您的应用程序已放入 settings.py 中的 INSTALLED_APPS。之后重新启动服务器。更改为其他列数应该很容易。

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