.grid {
  columns: 1 auto;
}

.grid-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  padding: 4px;
  box-sizing: border-box;
}

/* 1 column by default, hide columns 2, 3 & 4 */
.grid-col--2, .grid-col--3, .grid-col--4 { display: none; }


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


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