.ex-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 3rem;
  grid-auto-flow: dense;
  justify-content: center;
}
.ex-board__note-span {
  grid-row: span 2;
}

@include media-query-up (medium) {
  .ex-board {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

The grid tracks are created using an explicit grid. The auto-fill keyword ensures that the browser places as many columns as possible while respecting the minmax() value. This means that the grid columns won’t be smaller than 11rem on small devices (15rem on medium and larger devices) and not bigger than 1fr.

The grid-auto-flow property, set to dense, causes the grid items to fill gaps in the grid, even if it changes the display order.