aSkelly/scss/base/_grid.scss

@use '../utilities/main_utilities' as *;
@use "sass:math";

/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
/* https://stackoverflow.com/a/45059944 */
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */


// Add the content to whichever col-xx-xx
@mixin col-width($width: 100%) {
  flex: 0 0 $width* 1%; // *1% just to make it a % value, #{$width}% wasn't working
  max-width: $width * 1%;
}

// Add all the cols 1..12 of -xs -md -xl, etc. to stylesheet/media without needing to copy/paste or mass modify
// Just convienient
@mixin add-cols($modifier: ''){ // $modifier: '-md', etc.
  $max-cols: 12;
  $col-width: math.div(100,$max-cols); // 100/12 = 8.33% Then multiply this by the current col count 1..12

  @for $i from 1 through 12 {
    $width: $col-width * $i;
    .col#{$modifier}-#{$i} {
      @include col-width($width);
    }
  }

}

.container{
  margin: 0 auto;
  width: 100%;
  max-width: $width-content;
  padding: rems(22px) rems(16px);
  position: relative; // Default static doesn't like inverse margins atop other block elements
  /* overflow: auto; */
}
.container--no-topgap{
  padding-top: 0;
}
.container--no-botgap{
  padding-bottom: 0;
}
.container--no-gap{
  /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
  padding-bottom: 0;
  padding-top: 0;
}

.row {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; 
  flex-direction: row;
  row-gap: rems(19px); /* In-case of flex-wrap content, space it out. Padding left+right */

  // margin-right: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
  // margin-left: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
  margin-right: #{$grid-gap--numeric * -.5}rem;
  margin-left: #{$grid-gap--numeric * -.5}rem;

  

}

.row+.row{
  margin-top: rems(22px);
}

/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
/* .col>*{ */
.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
  width: 100%;
}
/* inline elements */
.col img, .col iframe{
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}


/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
.row [class^="col"]{
  // padding-right: $grid-gap; /* ~20px gap = 20/16(OLD html size)  / 2(as 2 elems next to each other should equat the gap = 0.62625 */
  // padding-left: $grid-gap; /* In place of gap, so it can be full width rows */
  padding-right: #{$grid-gap--numeric * .5}rem;
  padding-left: #{$grid-gap--numeric * .5}rem;

  /* display: flex; */
  /* flex-wrap: wrap; */
  min-height: 2px;
}


.row--scroll{
  flex-wrap: nowrap;
  overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
  justify-content: left;
  /* Scrollbar stuff */
  scrollbar-color: $color-text transparent;
  scrollbar-width: thin;
  padding-bottom: rems(8px);

  @include color-scheme(dark) {
    scrollbar-color: $color-text--dark transparent;
  }
}
.row--scroll [class^="col"]{}

.col{ flex: 0 1 auto; } // Just allow shrink, no grow

// Default cols to 100% width when below $media-xs (base 360px)
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
  flex: 0 0 100%;
}

@include media($media-xs) {

  // Once a breakpoint has been hit, cols will behave regularly,
  // but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
  // This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
  // use .col-4, etc. as an end-all be-all
  @include add-cols('');
  .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
  // Now the actual xs styling
  @include add-cols('-xs');

  .hidden-xs { display: none }

}

@include media($media-sm) {

  // THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
  // if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size 
  @include add-cols('');

  /* (100/12) * x = the flex % */
  @include add-cols('-sm');
  
  .hidden-sm { display: none }

  // Any overwrites for previous sizes (as using min-width by preference)
  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
  // IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
  // but then I guess I'd need a 'show-md' etc, which has the same problem...
  .hidden-xs { display: unset }

}

@include media($media-md){

  /* (100/12) * x = the flex % */
  // Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
  @include add-cols('');
  @include add-cols('-md');
  
  .hidden-md { display: none }

  // Any overwrites for previous sizes (as using min-width by preference)
  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
  .hidden-xs, .hidden-sm { display: unset }

}

@include media($media-lg) {

  // Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
  // each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
  // little uhhhh, jank and repetative atm
  /* (100/12) * x = the flex % */
  @include add-cols('-lg');
  
  .hidden-lg { display: none }

  // Any overwrites for previous sizes (as using min-width by preference)
  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
  .hidden-xs, .hidden-sm, .hidden-md { display: unset }

}

@include media($media-xl) {

  /* (100/12) * x = the flex % */
  @include add-cols('-xl');
  
  .hidden-xl { display: none }

  // Any overwrites for previous sizes (as using min-width by preference)
  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
  .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }

}

// These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...

/* Try to avoid !important, have each rule set to keep track of */
.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
  padding: 0; /* In-case elements want to be full-width, touching, etc */
}

.row--align-center{ align-items: center;}
.row--justify-center{ justify-content: center; }
.col--align-center{ align-self: center; align-self: anchor-center}

/* Sort into col/sm areas with media queries */
.col-grow, .col-grow-sm
,.col-fill, .col-fill-sm{
  flex-grow: 1;
}