Grid

grid.scss

// Define SCSS variables for the gap and breakpoints
$gap: 40px;

$breakpoints: (
  xs: 0px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1800px,
  xxxl: 2400px,
  xxxxl: 4000px 
);

// Grid container styles
.grid {
  display: grid;
  gap: $gap;
  grid-template-columns: repeat(12, 1fr); // 12 equal columns by default

  // Loop through each breakpoint and create responsive classes
  @each $size, $value in $breakpoints {
    @media (min-width: $value) {
      .#{$size}12 { grid-column: span 12; }
      .#{$size}11 { grid-column: span 11; }
      .#{$size}10 { grid-column: span 10; }
      .#{$size}9 { grid-column: span 9; }
      .#{$size}8 { grid-column: span 8; }
      .#{$size}7 { grid-column: span 7; }
      .#{$size}6 { grid-column: span 6; }
      .#{$size}5 { grid-column: span 5; }
      .#{$size}4 { grid-column: span 4; }
      .#{$size}3 { grid-column: span 3; }
      .#{$size}2 { grid-column: span 2; }
      .#{$size}1 { grid-column: span 1; }
    }
  }

  // Equal columns
  .col {
    grid-column: span 1;
  }
}

Usage Examples

HTML

<div class="grid">
    <div class="xs12 md6 lg4 xl3 xxl2 xxxl1">This is my column</div>
    <div class="xs12 md6 lg4 xl3 xxl2 xxxl1">This is my column</div>
    <div class="xs12 md6 lg4 xl3 xxl2 xxxl1">This is my column</div>
</div>

PUG

.grid
    .xs12.md6.lg4.xl3.xxl2.xxxl1 This is my column
    .xs12.md6.lg4.xl3.xxl2.xxxl1 This is my column
    .xs12.md6.lg4.xl3.xxl2.xxxl1 This is my column