pinterest grid

by Rodwyn Moreno

HTML

<div class="list">
		<div class="item" style="height: 14em; background-color: #F2DC1A;"></div>
		<div class="item" style="height: 26em; background-color: #FDC1F0;"></div>
		<div class="item" style="height: 8em; background-color: #A2DC1A;"></div>
		<div class="item" style="height: 14em; background-color: #DC1A01;"></div>
		<div class="item" style="height: 8em; background-color: #C1A00F;"></div>
		<div class="item" style="height: 18em; background-color: #1A0DAC;"></div>
		<div class="item" style="height: 16em; background-color: #ADC501;"></div>
		<div class="item" style="height: 12em; background-color: #0CCEAD;"></div>
	</div>

CSS

.list {
  background-color: #EFEFEF;
  width: 100%;
  overflow: hidden;
  column-count: 3;
  column-gap: 0;
  column-fill: auto;
  box-sizing: border-box;
  margin-bottom: -1.875em;
  
  .item {
    -webkit-column-break-inside: avoid;
  }
}