Masonry-Layout mit CSS-Columns

index.html

<div class="g g--masonry-2-to3-up">

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/450x200/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Jemand musste Josef K. verleumdet haben!</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x350/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Sonnen&shy;blumen&shy;kern&shy;brötchen werden wieder teurer!</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x452/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Jemand musste Josef K. verleumdet haben!</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x250/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Lorem Istdumm</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x450/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Ein Deutscher Hahn kämpft bis zum Grill</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x250/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Hab mich gewogen. Bin zu klein!</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x555/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Lerne leiden ohne zu klagen</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x275/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Frauen sind Engel - oder sie leben noch</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x520/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Scheitern ist das neue Siegen!</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x310/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Die Mutter der Dummheit ist ständig schwanger</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x390/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Pauschalurteile sind nie passend</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

  <div class="g__item">
    <figure class="block">
      <img src="http://placehold.it/400x550/" alt="" class="block__img" />
      <figcaption><h2 class="block__title">Die inneren Werte nehmen sich halt Platz</h2></figcaption>
    </figure><!--end block-->
  </div><!--end g__item-->

</div><!--end g-->

<section class="section__after__masonry">
  <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und <strong>strong</strong> es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.</p>
</section>

masonry-layout-mit-css-columns.markdown

Masonry-Layout mit CSS-Columns

A Pen by Jens Grochtdreis on CodePen.

License.

script.js

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

$(".block__title").on("click", function(){
  $(this).parent().prev().slideToggle();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

/*------------------------------------*\
    #GLOBAL/IRRELEVANT STUFF
\*------------------------------------*/
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background: #f8f9f4;
  font-family: sans-serif;
}

h2 {
  font-size: 1.25rem;
  font-weight: bold;
}

.section__after__masonry {
  background:#5fa9c4;
  padding: 4rem 2rem;
}





/*------------------------------------*\
    #BLOCK
\*------------------------------------*/
.block {
  background: #fff;
  border: 1px solid #ddd;
}

.block__title {
  margin: 0;
  padding: 0.5rem;
  
  &:hover, &:focus {
    cursor: pointer;
  }
}

.block__img {
  max-width: 100%;
  width: 100%;
  display: block;
}





/*------------------------------------*\
    #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: 2rem;
  // 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;
}