JSFiddle - React, Tailwind, and code Playground

by nimareq

HTML

<div class="fake-masonry">
  <div class="item">Also works with a text block. </div>
  <div class="item" style="height: 190px">2</div>
  <div class="item">
    3 <br>
    Also works with a text block. And dynamic height.
  </div>
  <div class="item" style="height: 120px">4</div>
  <div class="item" style="height: 160px">5</div>
  <div class="item" style="height: 180px">6</div>
  <div class="item" style="height: 140px">7</div>
  <div class="item" style="height: 150px">8</div>
  <div class="item" style="height: 170px">9</div>
  <div class="item" style="height: 170px">10</div>
</div>

CSS

body { font-family: sans-serif; }

.fake-masonry {
	display: flex;
	flex-flow: column wrap;
	align-content: space-between;
	height: 665px;
	max-width: 1000px;
	/* margin: auto; */
}

.fake-masonry::before,
.fake-masonry::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}


.item {
	box-sizing: border-box;
	width: calc(100% / 3 - 10px); /* element count - margin */
	background: #ccc;
  margin: 5px;
  padding: 1em;
}

.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }