angular bricks

by Felipe Alfaro

HTML

<script src="https://unpkg.com/bricks.js/dist/bricks.js"></script>
<div class="bricks">
  
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  <div class="brick">0</div>
  
</div>

SCSS

.bricks
{
  width: 100% !important;
  height: auto !important;
  
  > .brick
  {
    width: 20%;
    height: 100px;
    background: gainsboro;
  }
}

JavaScript

var bricks = new Bricks({
  container: document.querySelector('.bricks'),
  packed: 'data-packed',
  sizes: [
    { columns: 5, gutter: 0 },
    //{ mq: '768px', columns: 3, gutter: 25 },
    //{ mq: '1024px', columns: 4, gutter: 50 }
  ],
  position: true
});

bricks.pack();