Bootstraps grid system is well known throughout the world. 12 columns are quite flexible and you can make your page responsive in no time. However, it has some flaws:

• Its structure require at least three level of nesting: .container, .row and .col. The .container is unnecessary.
• Its classes are not scoped. .container and .row are not that exotic that no-one would ever accidentally use those.

However, you can reverse engineer bootstrap’s grid system with less than 100 lines of scss code!

Here is a prototype:

$breakpoints: (
  "sm": 600px,
  "md": 800px,
  "lg": 1000px
);

.tb-grid {
  display: grid;
  column-gap: 15px;
  row-gap: 15px;
  grid-template-columns: repeat(12, 1fr);
  > * {
    grid-column-start: span 12;
  }
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    @media (min-width: #{$breakpoint-value}) {
      @for $i from 1 through 12 {
        .tb-#{$breakpoint-name}-#{$i} {
          grid-column-start: span #{$i};
        }
      }
    }
  }
}

This idea can be taken a bit further by working with CSS variables to customize things like breakpoints and gutters!

The full code and a translation to css can be found here: tb-grid code

There’s also a demo on Stackblitz available here: tb-grid on Stackblitz

Conclusion

With modern css it is dead simple to reverse engineer bootstrap’s grid system. Not only that, we also managed to eliminate the need for the extra container and have it nicely scoped under the tb- prefix.