scss/layout/_grid.scss

@use "sass:map";
@use "../config" as *;
@use "../mixins/grid" as *;
@use "breakpoints" as *;

// mdo-do
// - check gap utilities as replacement for gutter classes from v5

:root {
  @each $name, $value in $grid-breakpoints {
    --#{$prefix}breakpoint-#{$name}: #{$value};
  }
}

@layer layout {
  @if $enable-grid-classes {
    .row {
      @include make-row();

      > * {
        @include make-col-ready();
      }
    }

    @include make-grid-columns();
  }

  @if $enable-cssgrid {
    .grid {
      --#{$prefix}columns: #{$grid-columns};
      --#{$prefix}rows: 1;
      --#{$prefix}gap: #{$grid-gutter-width};

      display: grid;
      grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
      grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
      gap: var(--#{$prefix}gap);

    }

    @include make-cssgrid();
  }

  // mdo-do: add to utilities?
  .grid-cols-subgrid {
    grid-template-columns: subgrid;
  }

  .grid-fill {
    --#{$prefix}gap: #{$grid-gutter-width};

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: var(--#{$prefix}gap);
  }

  // .g-col-auto {
  //   grid-column: auto;
  // }

  // mdo-do: add to utilities?
  // .grid-cols-3 {
  //   --#{$prefix}columns: 3;
  // }
  // .grid-cols-4 {
  //   --#{$prefix}columns: 4;
  // }
  // .grid-cols-6 {
  //   --#{$prefix}columns: 6;
  // }

  // .grid-full {
  //   grid-column: 1 / -1;
  // }
}