Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Title</h1>

<div class="masonry-layout">
  <article class="item">
    <h3>Article 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, asperiores quasi ut, corrupti inventore doloremque nisi, beatae quibusdam expedita voluptatibus quam ipsum possimus odio sit iusto atque culpa perspiciatis quos.</p>
  </article>
  <article class="item">
    <h3>Article 2</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, quidem!</p>
  </article>
  <article class="item">
    <h3>Article 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, maiores. Asperiores incidunt odio nihil eaque rerum hic? Cupiditate, minima distinctio doloribus excepturi voluptatem nemo maiores quia repudiandae. Optio, molestias, amet adipisci illum
      autem soluta facere eius tempora blanditiis a cumque culpa iste maxime consectetur ea consequuntur ab veniam recusandae. Nihil.</p>
  </article>
  <article class="item">
    <h3>Article 4</h3>
    <p>Lorem, ipsum.</p>
  </article>
  <article class="item">
    <h3>Article 5</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quasi quidem, recusandae magni alias doloremque fugiat fugit accusantium nemo, assumenda exercitationem soluta perspiciatis rerum expedita reiciendis! Voluptatem quisquam ea non.</p>
  </article>
  <article class="item">
    <h3>Article 6</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit possimus nobis nihil totam earum eius animi sint et quis adipisci.</p>
  </article>
  <article class="item">
    <h3>Article 7</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus error deserunt facere quam alias, reprehenderit ab tempora nobis laudantium maxime mollitia dicta at quibusdam nisi.</p>
  </article>
  <article class="item">
    <h3>Article 8</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sed consectetur molestiae non sint officiis porro assumenda sequi dolores vero cupiditate, ipsum, provident praesentium repellat odio reiciendis. Non, doloribus autem? Reprehenderit fuga
      consequuntur facilis optio.</p>
  </article>
  <article class="item">
    <h3>Article 9</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laboriosam, quisquam cupiditate voluptatibus illo culpa!</p>
  </article>
  <article class="item">
    <h3>Article 10</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, asperiores quasi ut, corrupti inventore doloremque nisi, beatae quibusdam expedita voluptatibus quam ipsum possimus odio sit iusto atque culpa perspiciatis quos.</p>
  </article>
  <article class="item">
    <h3>Article 11</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, quidem!</p>
  </article>
  <article class="item">
    <h3>Article 12</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, maiores. Asperiores incidunt odio nihil eaque rerum hic? Cupiditate, minima distinctio doloribus excepturi voluptatem nemo maiores quia repudiandae. Optio, molestias, amet adipisci illum
      autem soluta facere eius tempora blanditiis a cumque culpa iste maxime consectetur ea consequuntur ab veniam recusandae. Nihil.</p>
  </article>
  <article class="item">
    <h3>Article 13</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quasi quidem, recusandae magni alias doloremque fugiat fugit accusantium nemo, assumenda exercitationem soluta perspiciatis rerum expedita reiciendis! Voluptatem quisquam ea non.</p>
  </article>
  <article class="item">
    <h3>Article 14</h3>
    <p>Lorem, ipsum.</p>
  </article>
  <article class="item">
    <h3>Article 15</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit possimus nobis nihil totam earum eius animi sint et quis adipisci.</p>
  </article>
  <article class="item">
    <h3>Article 16</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sed consectetur molestiae non sint officiis porro assumenda sequi dolores vero cupiditate, ipsum, provident praesentium repellat odio reiciendis. Non, doloribus autem? Reprehenderit fuga
      consequuntur facilis optio.</p>
  </article>
  <article class="item">
    <h3>Article 17</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus error deserunt facere quam alias, reprehenderit ab tempora nobis laudantium maxime mollitia dicta at quibusdam nisi.</p>
  </article>
  <article class="item">
    <h3>Article 18</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laboriosam, quisquam cupiditate voluptatibus illo culpa!</p>
  </article>
  <article class="item">
    <h3>Article 19</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, asperiores quasi ut, corrupti inventore doloremque nisi, beatae quibusdam expedita voluptatibus quam ipsum possimus odio sit iusto atque culpa perspiciatis quos.</p>
  </article>
  <article class="item">
    <h3>Article 20</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, quidem!</p>
  </article>
  <article class="item">
    <h3>Article 21</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, maiores. Asperiores incidunt odio nihil eaque rerum hic? Cupiditate, minima distinctio doloribus excepturi voluptatem nemo maiores quia repudiandae. Optio, molestias, amet adipisci illum
      autem soluta facere eius tempora blanditiis a cumque culpa iste maxime consectetur ea consequuntur ab veniam recusandae. Nihil.</p>
  </article>
  <article class="item">
    <h3>Article 22</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quasi quidem, recusandae magni alias doloremque fugiat fugit accusantium nemo, assumenda exercitationem soluta perspiciatis rerum expedita reiciendis! Voluptatem quisquam ea non.</p>
  </article>
  <article class="item">
    <h3>Article 23</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit possimus nobis nihil totam earum eius animi sint et quis adipisci.</p>
  </article>
  <article class="item">
    <h3>Article 24</h3>
    <p>Lorem, ipsum.</p>
  </article>
  <article class="item">
    <h3>Article 25</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus error deserunt facere quam alias, reprehenderit ab tempora nobis laudantium maxime mollitia dicta at quibusdam nisi.</p>
  </article>
  <article class="item">
    <h3>Article 26</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sed consectetur molestiae non sint officiis porro assumenda sequi dolores vero cupiditate, ipsum, provident praesentium repellat odio reiciendis. Non, doloribus autem? Reprehenderit fuga
      consequuntur facilis optio.</p>
  </article>
  <article class="item">
    <h3>Article 27</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laboriosam, quisquam cupiditate voluptatibus illo culpa!</p>
  </article>
  <article class="item">
    <h3>Article 28</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, asperiores quasi ut, corrupti inventore doloremque nisi, beatae quibusdam expedita voluptatibus quam ipsum possimus odio sit iusto atque culpa perspiciatis quos.</p>
  </article>
  <article class="item">
    <h3>Article 29</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, quidem!</p>
  </article>
  <article class="item">
    <h3>Article 30</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, maiores. Asperiores incidunt odio nihil eaque rerum hic? Cupiditate, minima distinctio doloribus excepturi voluptatem nemo maiores quia repudiandae. Optio, molestias, amet adipisci illum
      autem soluta facere eius tempora blanditiis a cumque culpa iste maxime consectetur ea consequuntur ab veniam recusandae. Nihil.</p>
  </article>
  <article class="item">
    <h3>Article 31</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quasi quidem, recusandae magni alias doloremque fugiat fugit accusantium nemo, assumenda exercitationem soluta perspiciatis rerum expedita reiciendis! Voluptatem quisquam ea non.</p>
  </article>
  <article class="item">
    <h3>Article 32</h3>
    <p>Lorem, ipsum.</p>
  </article>
  <article class="item">
    <h3>Article 33</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit possimus nobis nihil totam earum eius animi sint et quis adipisci.</p>
  </article>
  <article class="item">
    <h3>Article 34</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus error deserunt facere quam alias, reprehenderit ab tempora nobis laudantium maxime mollitia dicta at quibusdam nisi.</p>
  </article>
  <article class="item">
    <h3>Article 35</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sed consectetur molestiae non sint officiis porro assumenda sequi dolores vero cupiditate, ipsum, provident praesentium repellat odio reiciendis. Non, doloribus autem? Reprehenderit fuga
      consequuntur facilis optio.</p>
  </article>
  <article class="item">
    <h3>Article 36</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, asperiores quasi ut, corrupti inventore doloremque nisi, beatae quibusdam expedita voluptatibus quam ipsum possimus odio sit iusto atque culpa perspiciatis quos.</p>
  </article>
  <article class="item">
    <h3>Article 37</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laboriosam, quisquam cupiditate voluptatibus illo culpa!</p>
  </article>
  <article class="item">
    <h3>Article 38</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, quidem!</p>
  </article>
  <article class="item">
    <h3>Article 39</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, maiores. Asperiores incidunt odio nihil eaque rerum hic? Cupiditate, minima distinctio doloribus excepturi voluptatem nemo maiores quia repudiandae. Optio, molestias, amet adipisci illum
      autem soluta facere eius tempora blanditiis a cumque culpa iste maxime consectetur ea consequuntur ab veniam recusandae. Nihil.</p>
  </article>
  <article class="item">
    <h3>Article 40</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quasi quidem, recusandae magni alias doloremque fugiat fugit accusantium nemo, assumenda exercitationem soluta perspiciatis rerum expedita reiciendis! Voluptatem quisquam ea non.</p>
  </article>
  <article class="item">
    <h3>Article 41</h3>
    <p>Lorem, ipsum.</p>
  </article>
  <article class="item">
    <h3>Article 42</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit possimus nobis nihil totam earum eius animi sint et quis adipisci.</p>
  </article>
  <article class="item">
    <h3>Article 43</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus error deserunt facere quam alias, reprehenderit ab tempora nobis laudantium maxime mollitia dicta at quibusdam nisi.</p>
  </article>
  <article class="item">
    <h3>Article 44</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sed consectetur molestiae non sint officiis porro assumenda sequi dolores vero cupiditate, ipsum, provident praesentium repellat odio reiciendis. Non, doloribus autem? Reprehenderit fuga
      consequuntur facilis optio.</p>
  </article>
  <article class="item">
    <h3>Article 45</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laboriosam, quisquam cupiditate voluptatibus illo culpa!</p>
  </article>
  <article class="item">
    <h3>Article 46</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, asperiores quasi ut, corrupti inventore doloremque nisi, beatae quibusdam expedita voluptatibus quam ipsum possimus odio sit iusto atque culpa perspiciatis quos.</p>
  </article>
  <article class="item">
    <h3>Article 47</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, quidem!</p>
  </article>
  <article class="item">
    <h3>Article 48</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, maiores. Asperiores incidunt odio nihil eaque rerum hic? Cupiditate, minima distinctio doloribus excepturi voluptatem nemo maiores quia repudiandae. Optio, molestias, amet adipisci illum
      autem soluta facere eius tempora blanditiis a cumque culpa iste maxime consectetur ea consequuntur ab veniam recusandae. Nihil.</p>
  </article>
  <article class="item">
    <h3>Article 49</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quasi quidem, recusandae magni alias doloremque fugiat fugit accusantium nemo, assumenda exercitationem soluta perspiciatis rerum expedita reiciendis! Voluptatem quisquam ea non.</p>
  </article>
  <article class="item">
    <h3>Article 50</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit possimus nobis nihil totam earum eius animi sint et quis adipisci.</p>
  </article>
  <article class="item">
    <h3>Article 51</h3>
    <p>Lorem, ipsum.</p>
  </article>
  <article class="item">
    <h3>Article 52</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus error deserunt facere quam alias, reprehenderit ab tempora nobis laudantium maxime mollitia dicta at quibusdam nisi.</p>
  </article>
  <article class="item">
    <h3>Article 53</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sed consectetur molestiae non sint officiis porro assumenda sequi dolores vero cupiditate, ipsum, provident praesentium repellat odio reiciendis. Non, doloribus autem? Reprehenderit fuga
      consequuntur facilis optio.</p>
  </article>
  <article class="item">
    <h3>Article 54</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laboriosam, quisquam cupiditate voluptatibus illo culpa!</p>
  </article>
  <article class="item">
    <h3>Article 55</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, asperiores quasi ut, corrupti inventore doloremque nisi, beatae quibusdam expedita voluptatibus quam ipsum possimus odio sit iusto atque culpa perspiciatis quos.</p>
  </article>
  <article class="item">
    <h3>Article 56</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, quidem!</p>
  </article>
  <article class="item">
    <h3>Article 57</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, maiores. Asperiores incidunt odio nihil eaque rerum hic? Cupiditate, minima distinctio doloribus excepturi voluptatem nemo maiores quia repudiandae. Optio, molestias, amet adipisci illum
      autem soluta facere eius tempora blanditiis a cumque culpa iste maxime consectetur ea consequuntur ab veniam recusandae. Nihil.</p>
  </article>
  <article class="item">
    <h3>Article 58</h3>
    <p>Lorem, ipsum.</p>
  </article>
  <article class="item">
    <h3>Article 59</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quasi quidem, recusandae magni alias doloremque fugiat fugit accusantium nemo, assumenda exercitationem soluta perspiciatis rerum expedita reiciendis! Voluptatem quisquam ea non.</p>
  </article>
  <article class="item">
    <h3>Article 60</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit possimus nobis nihil totam earum eius animi sint et quis adipisci.</p>
  </article>
  <article class="item">
    <h3>Article 61</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus error deserunt facere quam alias, reprehenderit ab tempora nobis laudantium maxime mollitia dicta at quibusdam nisi.</p>
  </article>
  <article class="item">
    <h3>Article 62</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sed consectetur molestiae non sint officiis porro assumenda sequi dolores vero cupiditate, ipsum, provident praesentium repellat odio reiciendis. Non, doloribus autem? Reprehenderit fuga
      consequuntur facilis optio.</p>
  </article>
  <article class="item">
    <h3>Article 63</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laboriosam, quisquam cupiditate voluptatibus illo culpa!</p>
  </article>
</div>
              
            
!

CSS

              
                * { box-sizing: border-box; }

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    max-width: 1140px;
    margin: 0 auto;
    background-color: #eee;
    padding: 1rem;
}

.item {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    transition: left 0.2s ease-in-out;
}

.item h3 {
    margin-top: 0;
}

.item p {
    margin-botom: 0;
}
              
            
!

JS

              
                console.clear();

/**
 * MAIN
 */
document.addEventListener("DOMContentLoaded", () => {
  new MasonryLayout(".masonry-layout", {
    columnCount: {
      480: 2,
      768: 3,
      960: 4
    },
    columnGap: 16,
    rowGap: 16
  });
});


/**
 * Masonry Layout
 * @param {string} selector css selector for teh grid container
 * @param {object} options different options to customize the layout
 */
class MasonryLayout {
  constructor(selector, options) {
    this.grid = document.querySelector(selector);

    if (!this.grid) {
      console.error(`No element found with selector ${selector}!`);
      return;
    }

    // options
    this.columnBreakpoints = options.columnCount;
    this.columnCount = this._columnCount();
    this.columnGap = options.columnGap || 16;
    this.rowGgap = options.rowGap || 16;

    // derived
    this.items = Array.from(this.grid.children);

    // init
    this._init();
  }
  
  _columnCount() {
    const breakpoints = Object.entries(this.columnBreakpoints);
    breakpoints.sort((a, b) => parseInt(b[0], 10) - parseInt(a[0], 10));
    
    const windowWidth = window.innerWidth;
    
    for (let i = 0; i < breakpoints.length; i++) {
      const [minWidth, columnCount] = breakpoints[i];
  
      if (windowWidth >= parseInt(minWidth, 10)) {
        return columnCount;
      }
    }
    return 1;
  }

  _init() {
    // init grid
    this.grid.style.position = "relative";

    // add event listeners
    window.addEventListener(
      "resize",
      _.debounce(this._calculate.bind(this), 100)
    );

    this._calculate();
  }

  _calculate() {
    this.columnCount = this._columnCount();
    
    // reset temp properties
    this.columns = new Array(this.columnCount).fill(null).map(i => []);
    this.currentColumn = 0;

    // calculate resizable properties
    this.itemWidth =
      (this.grid.clientWidth - (this.columnCount - 1) * this.columnGap) /
      this.columnCount;

    this.items.forEach((item, index) => {
      // style each item
      // TODO: use static styles if columnCount is 1
      item.style.position = "absolute";
      item.style.width = this.itemWidth + "px";
      item.style.top = this._positionTopPacked(index) + "px";
      item.style.left = this._positionLeftPacked(index) + "px";

      if (this.columnCount > 1) {
        // update current column for next item
        const refColIndex = this.currentColumn > 0 ? this.currentColumn - 1 : 1;
        const refCol = this.columns[refColIndex];

        const currentTop = this._positionTopPacked(index);
        const refBottom = refCol.length
          ? this._positionBottom(refCol[refCol.length - 1])
          : 0;

        // only go to next column, if current column
        // is higher than ref column
        if (currentTop >= refBottom) {
          if (this.currentColumn < this.columnCount - 1) {
            this.currentColumn += 1;
          } else {
            // go back to the first column if we
            // reached the last column
            this.currentColumn = 0;
          }
        }
      }
    });
  }

  _positionLeftPacked(index) {
    this.columns[this.currentColumn].push(index);
    
    if (this.currentColumn === 0) {
      return 0;
    }
    return (this.currentColumn * this.itemWidth) + (this.currentColumn * this.columnGap);
  }

  _positionTopPacked() {
    const currentCol = this.columns[this.currentColumn];

    if (currentCol.length === 0) {
      return 0;
    }

    const topItem = this.items[currentCol[currentCol.length - 1]];
    return topItem.offsetTop + topItem.clientHeight + this.rowGgap;
  }

  _positionBottom(index) {
    const item = this.items[index];
    return item.offsetTop + item.clientHeight + this.rowGgap;
  }

  /*** PUBLIC METHODS ***/

  recalculate() {
    this._calculate();
  }

  append(item) {
    this.items = this.items.push(item);
    // TODO: only calculate new item
    this._calculate();
  }

  prepend(item) {
    this.items = [item, ...this.items];
    this._calculate();
  }
}

              
            
!
999px

Console