All that's needed to make a nice, dynamic grid using the CSS Grid Layout Module. Useful for lists of products, photos, videos, etc. where all items have the same aspect ratio.

fixed-ratio-grid.scss

.grid-container {
  display: grid;
  grid-gap: 1em;
  // set the number of columns explicitly:
  grid-template-columns: repeat(4, 1fr);
  // or set the number of columns based on minimum element width:
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  // the magic trick! this fills up gaps automatically when some items are larger than others:
  grid-auto-flow: dense;
}

.large-grid-item {
  // large items take up 2x2 cells
  // caveat: bad results if there is only one column
  // haven't yet found a way to only set a "span 2" if there are actually two columns to use
  // workarounds would be to always use at least two columns,
  // or use a media query to disable these rules for narrow layouts
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.hidden-grid-item {
  // items can be hidden by setting this class, and the whole grid reflows automatically
  // useful for filtering lists using javascript, without having to alter source order
  display: none;
}