masonry

by justicechan

HTML

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-sizer"></div>
			<div class="child grid-item box_1">
				<h2>Box - 1</h2>
			</div>
			<div class="child grid-item box_2"> <br/>hello<h2>Box - 2</h2>
                <h2>Box - 2</h2>
                <h2>Box - 2</h2>
			</div>
			<div class="child grid-item box_3"> <br/>hello
				 <h2>Box - 3</h2>
			</div>
			<div class="child grid-item box_4">
			<h2>Box - 4</h2>
			</div>
		</div>

CSS

.grid-item {
      float: left;
      
      border: 2px solid hsla(0, 0%, 0%, 0.5);
      background: red;
  }
  
 .grid-sizer {
    width: 16.667%;
}

  .box_1 {
  background-color: red;
  width: calc(66% - 8px);
}

.box_2 {
  background-color: green;
  width: calc(34% - 8px);
}

.box_3 {
  background-color: yellow;
   width: calc(66% - 8px);
}

.box_4 {
  background-color: blue;
  width: calc(34% - 8px);
}

JavaScript

$('.grid').masonry({
		itemSelector: '.grid-item',
		percentPosition: true,
		 horizontalOrder: true,
		 //gutter: 1,
		columnWidth: '.grid-sizer',
});