实体化中的砌体

Question

我想知道是否有任何方法可以在类似砖石结构的显示器中放置物化卡。我想避免使用砌体之类的插件，也不必编译sass，因为它将用于aurelia应用程序，并且外部库的配置等使我非常痛苦。

我遇到的最接近的东西是：http : //codepen.io/mike-north/pen/MwVoYp?editors=1100，它通过以下方式实现：

.cards-container {
  column-break-inside: avoid;
  .card {
    display: inline-block;
    overflow: visible;
  }
}

las，我无法使用sass-css编译器来使其正常工作。问题是卡显示损坏，如在此图中可以看到。我尝试过的其他方法导致的结果相同：卡破了。任何帮助将不胜感激。

Answer 1

.cards-container {
  column-break-inside: avoid;
}
.cards-container .card {
  display: inline-block;
  overflow: visible;
}

@media only screen and (max-width: 600px) {
  .cards-container {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
@media only screen and (min-width: 601px) {
  .cards-container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 993px) {
  .cards-container {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
.text-center {
  text-align: center;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" />
<div class="container">
  <div class="row">
    <div class="col s12">
      <h2 class='text-center'>Multi-column <a href="http://materializecss.com">MaterializeCSS</a> card flow</h2>
      <h4 class='text-center grey-text lighten-3'>
        By <a href="https://twitter.com/michaellnorth">@MichaelLNorth</a>
      </h4>
    </div>
  </div>
  <div class="row">
    <div class="col s12 cards-container">
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>      
    </div>
  </div>
</div>

看看这个人，这是在工作yayayayayay .....