xrpl-dev-portal/shared/components/PageGrid/_page-grid.scss

// XRPL Grid
// -----------------------------------------------------------------------------
// A namespaced grid layer that reuses Bootstrap's grid mixins while providing
// XRPL-specific gutters and container padding.

$xrpl-grid-gutter: 8px;

// Custom mixin that accounts for gap spacing in width calculations
@mixin xrpl-make-col($size, $columns) {
  flex: 0 0 auto;
  // Calculate width accounting for gap spacing
  // Formula: width per column * span + gap spacing between spanned columns
  // Total gaps in grid: ($columns - 1)
  // Total available width: 100% - (gap * total gaps)
  // Width per column: available width / columns
  // For span of $size: (width per column * size) + (gap * (size - 1))
  width: calc(((100% - (#{$xrpl-grid-gutter} * (#{$columns} - 1))) / #{$columns}) * #{$size} + (#{$xrpl-grid-gutter} * (#{$size} - 1)));
}

@mixin xrpl-grid-generate-cols($columns, $suffix: null) {
  @for $i from 1 through $columns {
    $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-#{$i}", ".xrpl-grid__col-#{$i}");

    #{$selector} {
      @include xrpl-make-col($i, $columns);
    }
  }
}

@mixin xrpl-grid-generate-auto($suffix: null) {
  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-auto", ".xrpl-grid__col-auto");

  #{$selector} {
    @include make-col-auto();
  }
}

@mixin xrpl-grid-generate-fill($suffix: null) {
  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}", ".xrpl-grid__col");

  #{$selector} {
    flex: 1 0 0;
  }
}

@mixin xrpl-grid-generate-offsets($columns, $suffix: null) {
  @for $i from 0 through ($columns - 1) {
    $selector: if($suffix, ".xrpl-grid__offset-#{$suffix}-#{$i}", ".xrpl-grid__offset-#{$i}");

    #{$selector} {
      @include make-col-offset($i, $columns);
    }
  }
}

// Mixin to generate responsive base column classes (1-12) with built-in breakpoint behavior
@mixin xrpl-grid-generate-responsive-base-cols() {
  @for $i from 1 through 12 {
    .xrpl-grid__col-#{$i} {
      // Base breakpoint (4 columns): if span > 4, clamp to 4 (which gives 4/4 = 100%)
      @if $i > 4 {
        @include xrpl-make-col(4, 4);
      } @else {
        @include xrpl-make-col($i, 4);
      }

      // SM breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%)
      @include media-breakpoint-up(sm) {
        @if $i > 8 {
          @include xrpl-make-col(8, 8);
        } @else {
          @include xrpl-make-col($i, 8);
        }
      }

      // MD breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%)
      @include media-breakpoint-up(md) {
        @if $i > 8 {
          @include xrpl-make-col(8, 8);
        } @else {
          @include xrpl-make-col($i, 8);
        }
      }

      // LG+ breakpoints (12 columns): always calculate based on 12 cols
      @include media-breakpoint-up(lg) {
        @include xrpl-make-col($i, 12);
      }
    }
  }
}

.xrpl-grid {
  &__container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    box-sizing: border-box;

    @include media-breakpoint-up(sm) {
      padding-right: 24px;
      padding-left: 24px;
    }

    @include media-breakpoint-up(lg) {
      padding-right: 32px;
      padding-left: 32px;
    }

    @media (min-width: 1280px) {
      padding-right: 112px;
      padding-left: 112px;
      max-width: 1440px;
    }
  }

  &__row {
    display: flex;
    flex-wrap: wrap;
    // Use gap for spacing - works with our calc-based column widths
    gap: $xrpl-grid-gutter;
  }

  &__col {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    // No padding/margin for gutters - spacing handled by gap on row
    // Column widths are calculated to account for gap spacing
    // Padding can be added via style prop without affecting grid spacing
  }
}

// Base (0 - 575px) — 4-column grid with responsive behavior built-in
@include xrpl-grid-generate-fill();
@include xrpl-grid-generate-responsive-base-cols();
@include xrpl-grid-generate-auto();
@include xrpl-grid-generate-offsets(4);

// Tablet (≥576px) — maintain 8-column grid across sm/md ranges
@include media-breakpoint-up(sm) {
  @include xrpl-grid-generate-fill('sm');
  @include xrpl-grid-generate-cols(8, 'sm');
  @include xrpl-grid-generate-auto('sm');
  @include xrpl-grid-generate-offsets(8, 'sm');
}

@include media-breakpoint-up(md) {
  @include xrpl-grid-generate-fill('md');
  @include xrpl-grid-generate-cols(8, 'md');
  @include xrpl-grid-generate-auto('md');
  @include xrpl-grid-generate-offsets(8, 'md');
}

// Large (≥992px) — 12-column grid
@include media-breakpoint-up(lg) {
  @include xrpl-grid-generate-fill('lg');
  @include xrpl-grid-generate-cols(12, 'lg');
  @include xrpl-grid-generate-auto('lg');
  @include xrpl-grid-generate-offsets(12, 'lg');
}

// XL (≥1280px) — retain 12-column grid with wider margins
@include media-breakpoint-up(xl) {
  @include xrpl-grid-generate-fill('xl');
  @include xrpl-grid-generate-cols(12, 'xl');
  @include xrpl-grid-generate-auto('xl');
  @include xrpl-grid-generate-offsets(12, 'xl');
}