.grid
  - for i in (1..4)
    div.grid-col
  - for i in (1..15)
    div.grid-item class="grid-item#{i}" #{i} 
    
View Compiled
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(2), .grid-col:nth-child(3) { display: none }

/* 3 columns at medium size */
@media ( min-width: 768px ) {
  .grid-col:nth-child(2) { display: block; } /* show column 2 */
}

/* 4 columns at large size */
@media ( min-width: 1080px ) {
  .grid-col:nth-child(3) { display: block; } /* show column 3 */
}

.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;
  }
}
View Compiled
var colc = new Colcade( '.grid', {
  columns: '.grid-col',
  items: '.grid-item'
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/colcade@0/colcade.js