.Masonry {
  margin-left: auto;
  margin-right: auto;
  max-width: 30em;
}

@supports (display: grid) {
  .Masonry {
    display: grid;
    grid-gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    max-width: none;
  }
}

.Masonry > * + * {
  margin-top: 1.25rem;
}

@supports (display: grid) {
  .Masonry > * + * {
    margin-top: 0;
  }
}

@supports (display: grid) {
  .Masonry {
    display: grid;
    grid-gap: 1.25rem;
    justify-items: center;
    max-width: none;
  }
  
  @media (min-width: 22.5em) {
    .Masonry {
      grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    }
  }
}

.Masonry > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
}

.Masonry > * + * {
  margin-top: 1.25rem;
}

@supports (display: grid) {
  .Masonry > * + * {
    margin-top: 0;
  }
}

Revise Masonry styles for greater responsiveness
Revise Masonry styles for greater responsiveness

A few changes made with @erikjung's help on the trickier parts:

- The most pleasing `min` value at large sizes is a little too wide for small sizes, so now `grid-template-columns` kicks in at a little larger than ~ `320px`.
- We're now using `auto-fit` instead of `auto-fill`, which removes the unsightly gaps when there aren't enough cells to fill the row.
- We're centering lone items using `justify-items: center`. There appears to be a `grid-gap` bug in Safari and Chrome that retains a right-hand gap at this size, but that's remedied by setting `auto` margins on the child items.
- And to keep any single item from getting too wide, we're now capping the width of the children rather than the width of the parent. This also serves as a nice fallback for grid-less browsers.
