.grid
  - for i in (1..4)
    div.grid-col
  - for i in (1..15)
    div.grid-item class="grid-item#{i}" #{i} 
    

body {
  margin: 0;
}

.grid {
  display: flex;
  padding: .5rem .5rem 0 .5rem;
}

.grid-col {
  flex-grow: 1;
}

/* 2 columns by default, hide columns 2 & 3 */
.grid-col:nth-child(n+3) { display: none }

@media ( min-width: 768px ) {
  .grid-col:nth-child(3) { display: block }
}

@media ( min-width: 1200px ) {
  .grid-col:nth-child(4) { display: block }
}

.grid-item {
  background: #EC985A;
  color: white;
  margin: .5rem .5rem 1rem .5rem;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

@for $i from 1 through 15 {
  .grid-item#{$i} {
    $h: (random(400) + 100) + px;
    height: $h;
    line-height: $h;
  }
}

var colc = new Colcade( '.grid', {
  columns: '.grid-col',
  items: '.grid-item'
});