grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));   /* 4 */
}
/* the 20% above results in 4 columns.. I can change that */
@media only screen and (max-width: 900px) {
  grid-container {
    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));   /* 4 */
  }
}
@media only screen and (max-width: 600px) {
  grid-container {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));   /* 4 */
  }
}


[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
  resize: both;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
}