Simulate a bootstrap like grid with SCSS

scss

In the following examples I use an array to create 'breakpoints' to be aligned with the current grid, in this case bootstrap'ish grid.

Examples

The first is an example where I want the .heading to align with the 'containers' in the rest of the page. Assuming we use bootstrap ofcourse :).

.heading {
  // Align margin-inline-start with grid; Simulate plate container.
  $header-breakpoints: (
    md: 768px,
    lg: 992px,
    xl: 1200px
  );
  @each $breakpoint, $value in $header-breakpoints {
    @include media-breakpoint-up($breakpoint) {
      // Calculate the max indent for each breakpoint and add 1 column width to the indent, in this case margin-inline-start.
      margin-inline-start: calc((100vw - #{$value}) / 2 + (#{$value} / 12));
    }
  }
}

In this second example I simulate the 'containers' width.

.fake-news-container {
  $container-breakpoints: (
    md: 768px,
    lg: 992px,
    xl: 1200px
  );
  @each $breakpoint, $value in $container-breakpoints {
    @include media-breakpoint-up($breakpoint) {
      // Calculate the max width and subtract that from viewport width.
      max-width: calc((100vw - #{$value}));;
      margin-inline: auto;
    }
  }
}

Very handy. I use these kinds of tricks in combination with css display: grid; areas.
Where I definitly do not want the divitus of let's say bootstrap.

Thanks y'all!