CSS columns masonry emulation

[mhulse]

There's this:

http://codepen.io/bradfrost/pen/XpWZGL

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/


/**
 * Grid object
 * 1) Over-arching grid container
 * 2) Creates overlap effect with content below
 */

.g {
  padding: 0.5rem;
  max-width: 84rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -3rem;
  /* 2 */
}


/**
 * 2-to-3-up masonry grid
 * 1) Creates a Pinterest-style, masonry grid with blocks of varying heights.
 * 2) Set number of columns to display
 */

.g--masonry-2-to3-up {
  column-count: 2;
  /* 2 */
  column-gap: 0;
  @media all and (min-width: 40em) {
    column-count: 3;
    /* 2 */
  }
  @media all and (min-width: 56em) {
    column-count: 4;
    /* 2 */
  }
}


/**
 * Grid item
 * 1) Direct child of the grid container element
 * 2) Prevents content from splitting up because of the 
 *    parent's CSS columns
 */

.g__item {
  padding: 0.5rem;
  -webkit-column-break-inside: avoid;
  /* 2 */
  page-break-inside: avoid;
  break-inside: avoid;
}

The markup:

<div class="g g--masonry-2-to3-up">
  <div class="g__item">
    <div class="block">
      <img src="http://lorempixel.com/g/450/200/" alt="" class="block__img" />
      <h2 class="block__title">Lorem ipsum dolar semet</h2>
    </div><!--end block-->
  </div><!--end g__item-->
  ...
  ...
  ...
</div><!--end g-->

Another explanation:

// By default the contents of the .article remains full width, centred and a maximum of 70ems wide.

.article {
 margin: 1em auto;
  width: 100%;
  padding: 1em;
  max-width: 70em;
}

// When the viewport hits 700px we split the contents into 2 columns and set the gap between the columns at 4% of the width.

@media  (min-width: 700px) {
.article {
    column-count: 2;
    column-gap: 4%;
         }
}

// Then when there is more space, at 1000px, we increase the column count to 3 and decrease the gap to 1%.

@media  (min-width: 1000px) {
.article {
          column-count: 3;
            column-gap: 1%;
         }
}