masonry

by justicechan

HTML

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid">
			<div class="child grid-item">
				Hello
				<br/>hello
				<br/>hello
				<br/>hello
				<br/>hello
			</div>
			<div class="child grid-item"> <br/>hello
				<br/>hello
				<br/>hello
			</div>
			<div class="child grid-item"> <br/>hello
				<br/>hello
				<br/>hello
			</div>
			<div class="child grid-item">
				<br/>How can I make this shift up in the white space that is available above?
				<br/>
				<br/>
			</div>
		</div>

CSS

.grid-item {
      float: left;
      width: calc(50% - 4px);
      border: 2px solid hsla(0, 0%, 0%, 0.5);
      background: red;
      margin-bottom:15px;
  }

JavaScript

$('.grid').masonry({
		itemSelector: '.grid-item',
});