Box posts

by Josh Pullen

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<divid="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 100%, "itemSelector": ".box" }'>
    <div class="box">
         <h1><a href="#">A Post</a></h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore assumenda commodi ratione facere sunt amet quam illo fugiat dolorem rem neque velit totam praesentium officiis...</p>
    </div>
    <div class="box">
         <h1><a href="#">A Post</a></h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore assumenda commodi ratione facere sunt amet quam illo fugiat dolorem rem neque velit totam praesentium officiis...</p>
    </div>
    <div class="box">
         <h1><a href="#">A Post</a></h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore assumenda commodi ratione facere sunt amet quam illo fugiat dolorem rem neque velit totam praesentium officiis...</p>
    </div>
    <div class="box">
         <h1><a href="#">A Post</a></h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore assumenda commodi ratione facere sunt amet quam illo fugiat dolorem rem neque velit totam praesentium officiis...</p>
    </div>
    <div class="box">
         <h1><a href="#">A Post</a></h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore assumenda commodi ratione facere sunt amet quam illo fugiat dolorem rem neque velit totam praesentium officiis...</p>
    </div>
      <div class="box">
         <h1><a href="#">A Post</a></h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore assumenda commodi ratione facere sunt amet quam illo fugiat dolorem rem neque velit totam praesentium officiis...</p>
    </div>
      <div class="box">
         <h1><a href="#">A Post</a></h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore assumenda commodi ratione facere sunt amet quam...

CSS

.box {
    display:inline-block;
    padding:20px;
    margin:10px;
    background:#eee;
    border-radius:4px;
    border:1px solid #ccc;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.54), 0 1px 0 rgba(255, 255, 255, .5) inset;
    -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.54), 0 1px 0 rgba(255, 255, 255, .5) inset;
    box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.54), 0 1px 0 rgba(255, 255, 255, .5) inset;
    width:250px;
}
.box h1 {
    line-height:1;
    -webkit-margin-before:0px;
    -webkit-margin-after:0px;
}
.box h1 a {
    color:black;
    text-decoration:none;
}