generateColumnBreakpoints.scss

@mixin generateColumnBreakpoints($elemMinWidth, $columnSpacing, $windowMinWidth, $windowMaxWidth) {
  $currentWidth: $windowMinWidth;
  
  @media (max-width: $windowMinWidth) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
    
  @while $currentWidth < $windowMaxWidth {
    @media (min-width: $currentWidth) and (max-width: ($currentWidth + $elemMinWidth) - 1px) {
      width: calc((100% - #{($columnSpacing * 2) * (floor($currentWidth / $elemMinWidth) - 1)}) / #{floor($currentWidth / $elemMinWidth)});
      
      &:nth-child(#{floor($currentWidth / $elemMinWidth)}n) {
        margin-right: 0;
      }
      &:nth-child(#{floor($currentWidth / $elemMinWidth)}n+1) {
        margin-left: 0;
      }
    }
    $currentWidth: $currentWidth + $elemMinWidth;
  }
  
  $currentWidth: $windowMaxWidth;
  
  @media (min-width: $currentWidth) {
      width: calc((100% - #{($columnSpacing * 2) * (floor($currentWidth / $elemMinWidth) - 1)}) / #{floor($currentWidth / $elemMinWidth)});
      
      &:nth-child(#{floor($currentWidth / $elemMinWidth)}n) {
        margin-right: 0;
      }
      &:nth-child(#{floor($currentWidth / $elemMinWidth)}n+1) {
        margin-left: 0;
      }
    }
    
}

.wrapper {
  padding: 0;
  margin: 0;
  font-size: 0;
}
.elem {
  font-size: 1rem;
  display: inline-block;
  background-color: green;
  margin: 5px 5px;
  @include generateColumnBreakpoints(400px, 5px, 800px, 3000px);
}