Use Staggered/Masonry Cards to make a Pinterest-like layout.

Basic

To get started, just enclose your cards or card panel with .masonry-grid class and each cards enclosed with .item class. It is recommended to use .card or .card-panel as root elements inside .item

Card

This is a panel in a staggered card

Card

This is a panel in a staggered card. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?

Card

This is a panel in a staggered card. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?

Card

This is a panel in a staggered card

Card with Image

This is a panel in a staggered card with image. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?

Card

This is a panel in a staggered card

Card

This is a panel in a staggered card. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?

Card

This is a panel in a staggered card

Card with Image

This is a panel in a staggered card with image. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?

  <div class="masonry-cards">
    <div class="item">
      <div class="card-panel">
        <h4 class="no-margin">Card</h4>
        <p>This is a panel in a staggered grid</p>
      </div>
    </div>

    <div class="item">
      <div class="card-panel">
        <h4 class="no-margin">Card</h4>
        <p>This is a panel in a staggered grid. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi
          sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?</p>
      </div>
    </div>

    <div class="item">
      <div class="card-panel">
        <h4 class="no-margin">Card</h4>
        <p>This is a panel in a staggered grid. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi
          sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?</p>
      </div>
    </div>

    <div class="item">
      <div class="card-panel">
        <h4 class="no-margin">Card</h4>
        <p>This is a panel in a staggered grid</p>
      </div>
    </div>
  </div>
            

Initialization

You can run the following code snippet to initialize the masonry card's.

  M.resizeMasonryCards();
            

Staggered Cards

Use this if you prefer the non-javascript version.

To use, just add a container with a .staggered-cards class, and then add your .card or .card-panel inside. Credits to MichaelLNorth for this helper. You can checkout his codepen here.

Please note that this will not work if the card has a .col class.

You can also customize the number of columns depending on the screen size like this class="staggered-cards s1 m2 l4 xl8". You can specify the number of columns from 1 to 12. If not specified, the default number of columns will be s1 m2 l3 xl4.

        
  <div class="staggered-cards s1 m2">
    <div class="card-panel">
      <h4 class="no-margin-t">Card</h4>
      <p>This is a panel in a staggered card</p>
    </div>
                
    <div class="card-panel">
      <h4 class="no-margin-t">Card</h4>
      <p>This is a panel in a staggered card. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
      Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi
      sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?</p>
    </div>

    <div class="card-panel">
      <h4 class="no-margin-t">Card</h4>
      <p>This is a panel in a staggered card. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi
        sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?</p>
    </div>

    <div class="card-panel">
      <h4 class="no-margin-t">Card</h4>
      <p>This is a panel in a staggered card. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Quibusdam dicta aliquid sint. Fugiat mollitia placeat delectus recusandae dolor minus commodi
        sapiente soluta, tempore nam voluptatem corrupti consequatur vel voluptatum illum?</p>
    </div>

    <div class="card-panel">
      <h4 class="no-margin-t">Card</h4>
      <p>This is a panel in a staggered card</p>
    </div>

    <div class="card-panel">
      <h4 class="no-margin-t">Card</h4>
      <p>This is a panel in a staggered card</p>
    </div>

    <div class="card-panel">
      <h4 class="no-margin-t">Card</h4>
      <p>This is a panel in a staggered card</p>
    </div>
  </div>