Simple flexbox columns with css variables. There are a few gotchas since we ensure alignment with negative margin-bottom and margin-left instead of nth-child, but all in all it works pretty well.

columns.scss

[class*=columns-] {
  --columns: 2;
  --columns-gutter: 40px;
  --columns-width: calc(100% / var(--columns) - var(--columns-gutter));

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: calc(var(--columns-gutter) * -1);
  margin-left: calc(var(--columns-gutter) * -1);

  > * {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--columns-width);
    margin-bottom: var(--columns-gutter);
    margin-left: var(--columns-gutter);
  }

  &.columns--no-gutter {
    --columns-gutter: 0;
  }

  &.columns--align-bottom {
    align-items: flex-end;
  }

  &.columns--align-center {
    align-items: center;
  }

  &.columns-3 {
    --columns: 3;
  }

  &.columns-4 {
    --columns: 4;
  }

  &.columns-5 {
    --columns: 5;
  }

  &.columns-6 {
    --columns: 6;
  }

  &.columns-7 {
    --columns: 7;
  }

  &.columns-8 {
    --columns: 8;
  }

  &.columns-9 {
    --columns: 9;
  }

  &.columns-10 {
    --columns: 10;
  }
}