Grid with flex-wrap, a single container, and a variable gap value

grid-with-flex.scss

$gap: 1rem;

.grid {
  display: flex; 
  margin: 0 calc(#{$gap} / -2) -$gap calc(#{$gap} / -2);
  flex-wrap: wrap;
}

.item {
  flex: 0 0 auto;
  margin: 0 calc(#{$gap} / 2) $gap calc(#{$gap} / 2);
  width: calc(33.3333% - #{$gap});
}

@media only screen and (max-width: 900px) {
  .item {
    width: calc(50% - #{$gap});
  }
}

@media only screen and (max-width: 650px) {
  .item {
    width: calc(100% - #{$gap});
  }
}