Wikidot Community

[[html]]
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});
</script>
<style>
.grid * { box-sizing: border-box; }

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 100%;
}
@media (min-width: 576px) {
  .grid-sizer,
  .grid-item {
    width: 49%;
  }
}
@media screen and (min-width: 768px) {
  .grid-sizer,
  .grid-item {
    width: 32%;
  }
}
@media screen and (min-width: 1200px) { 
  .grid-sizer,
  .grid-item {
    width: 24%;
  }
}

.grid-item {
  height: 120px;
  float: left;
  background: #00997B;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin-bottom: 20px;
}

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
</style>

<div class="container-fluid">
  <div class="grid" data-masonry='{ "itemSelector": ".grid-item",  "columnWidth": ".grid-sizer", "percentPosition": true, "gutter": 10}'>
    <div class="grid-sizer"></div>
    <div class="grid-item">item 1</div>
    <div class="grid-item grid-item--width2 grid-item--height2">item 2</div>
    <div class="grid-item grid-item--height3">item 3</div>
    <div class="grid-item grid-item--height2">item 4</div>
    <div class="grid-item .grid-item--width2">item 5</div>
    <div class="grid-item">item 6</div>
    <div class="grid-item">item 7</div>
    <div class="grid-item grid-item--height2">item 8</div>
    <div class="grid-item grid-item--width2 grid-item--height3">item 9</div>
    <div class="grid-item">item 10</div>
    <div class="grid-item grid-item--height2">item 11</div>
    <div class="grid-item">item 12</div>
    <div class="grid-item grid-item--width2 grid-item--height2">item 13</div>
    <div class="grid-item grid-item--width2">item 14</div>
    <div class="grid-item">item 15</div>
    <div class="grid-item grid-item--height2">item 16</div>
    <div class="grid-item">item 17</div>
    <div class="grid-item">item 18</div>
    <div class="grid-item grid-item--height3">item 19</div>
    <div class="grid-item grid-item--height2">item 20</div>
    <div class="grid-item">item 21</div>
    <div class="grid-item">item 22</div>
    <div class="grid-item grid-item--height2">item 23</div>
  </div>
</div>
[[/html]]