Design Material Design Lite Google Keepのように見えるカード付きグリッド

Question

私はDjangoをMaterial Design Liteと組み合わせて使用​​しています。

私は、画面の幅に合わせて縮尺を変えるカードを作成しました。

これはreadeableそれを維持するために除去一部のカードでレンダリングされた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が保管してくださいにチェック。主なアイデアは、カードをテーブルに入れるのではなく、いくつかの列に置くことです。実際には列内のすべてのカードが同じ幅を持っているので、列の中にカードを配布するだけです。

まず、私の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に入れていることを確認してください。その後、サーバーを再起動します。他の列数に変更するのは簡単です。

私のデザインにも瑕疵があります。同じ枚数のカードを各列に分けるので、それらのカードのうちのいくつかが長くて不運になると、列の一部が他のカードよりもずっと長くなることがあります。