.flex { 
  display: flex; 
  flex-flow: row; /* the default */
}
.grid { 
  display: grid; 
  grid-auto-flow: row; /* the default */
}

.compact { 
  display: grid; /* close enough for now */
  /* the default should match grid */
}

.grid.waterfall {
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  grid-auto-rows: minmax(2em, 1fr);
  
  div:nth-child(1) { grid-row: span 7; }
  div:nth-child(2) { grid-row: span 1; }
  div:nth-child(3n) { grid-row: span 3; }
  div:nth-child(4) { grid-row: span 5; }
  div:nth-child(5) { grid-row: span 7; }
}

figure { 
  border: thin solid;
  gap: 2px; 
  margin: 1em;
}

div {
  background: papayawhip;
  flex: 1;
  padding: 0.5em;
}