Edit in JSFiddle

<a href="https://youtu.be/eUF-dtI0GSw?t=3m34s" target="_blank">출처 : https://youtu.be/eUF-dtI0GSw?t=8m20s</a>

<div class="flexbox">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
  <div class="item">21</div>
  <div class="item">22</div>
  <div class="item">23</div>
  <div class="item">24</div>
  <div class="item">25</div>
  <div class="item">26</div>
  <div class="item">27</div>
  <div class="item">28</div>
  <p>break1</p>
  <p>break2</p>
  <p>break3</p>
  <p>break4</p>
  <p>break5</p>
  <p>break6</p>
  <p>break7</p>
  <p>break8</p>
</div> 

/* for demo style */
body { height: 670px; }
.flexbox { margin-top: 20px; padding: 4px; background: #ddd; }
.flexbox * { margin: 4px; padding: 5px 0; color: #fff; text-align: center; }
.flexbox *:nth-of-type(4n-3){ background: orange; }
.flexbox *:nth-of-type(4n-2){ background: black; }
.flexbox *:nth-of-type(4n-1){ background: green; }
.flexbox *:nth-of-type(4n){ background: gray; }
.flexbox *:nth-child(3n-2) { height: 60px; }
.flexbox *:nth-child(3n-1) { height: 80px; }

/* Pinterest layout */
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
}

.flexbox * { width: 22%; }

/* order by background color */
.flexbox *:nth-child(4n-3) { order: 1; }
.flexbox *:nth-child(4n-2) { order: 2; }
.flexbox *:nth-child(4n-1) { order: 3; }
.flexbox *:nth-child(4n) { order: 4; }
.flexbox *:nth-last-child(5) ~ p { height: 100%; }

.flexbox p { 
  margin: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}