Grid system like in bs

grid.scss

//include this scss if you want to use a grid, without importing a ui libary like bootstrap. 

// Vars
$container-padding: 15px;
$container-max-width: 1200px;
$columns: 12;

// Mixins
@mixin make-col($size, $columns: 12) {
  flex: 0 0 percentage($size / $columns);
  max-width: percentage($size / $columns);
}

// Base Grid
.container {
  width: 100%;
  padding-right: $container-padding;
  padding-left: $container-padding;
  margin-right: auto;
  margin-left: auto;
  max-width: $container-max-width;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$container-padding;
  margin-left: -$container-padding;
}

[class*="col-"] {
  padding-right: $container-padding;
  padding-left: $container-padding;
  box-sizing: border-box;
  flex: 1; // Default flex: 1 for equal columns
}

// Breakpoints
$breakpoints: (
  "xs": 0,    // Extra small devices (mobile, less than 576px)
  "sm": 576px, // Small devices (tablets, 576px and up)
  "md": 768px, // Medium devices (small laptops, 768px and up)
  "lg": 992px, // Large devices (desktops, 992px and up)
  "xl": 1200px // Extra large devices (large desktops, 1200px and up)
);

@each $breakpoint, $value in $breakpoints {
  @if $value != 0 {
    @media (min-width: $value) {
      @for $i from 1 through $columns {
        .col-#{$breakpoint}-#{$i} {
          @include make-col($i, $columns);
        }
      }
    }
  } @else {
    @for $i from 1 through $columns {
      .col-#{$breakpoint}-#{$i} {
        @include make-col($i, $columns);
      }
    }
  }
}

// Utility Classes for alignment and spacing
.justify-content-center {
  justify-content: center;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

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

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}