aSkelly/scss/base/_grid.scss

@use '../utilities/main_utilities' as *;

/* 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) */

html{
    font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
  }
  
  .container{
    margin: 0 auto;
    max-width: $width-content;
    padding: 1.4rem 1rem;
    /* 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;
    width: 100%;
  
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; 
    flex-direction: row;
    row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
  }
  
  .row+.row{
    margin-top: 1.4rem;
  }
  
  /* 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{
    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: 0.625rem; /* ~20px gap = 20/16(html size)  / 2(as 2 elems next to each other should equat the gap = 0.62625 */
    padding-left: 0.625rem; /* In place of gap, so it can be full width rows */
  
    /* display: flex; */
    /* flex-wrap: wrap; */
    min-height: 0.125rem;
  }
  
  
  .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: #444 transparent;
    scrollbar-width: thin;
    padding-bottom: .5rem;
  }
  .row--scroll [class^="col"]{
  
  }
  
  .col{
    flex: 0 0 auto;
  }
  
  .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%;
  }
  
  /* (100/12) * x = the flex % */
  .col-sm-1 { flex: 0 0 8.33%; }
  .col-sm-2 { flex: 0 0 16.66%; }
  .col-sm-3 { flex: 0 0 25%; }
  .col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
  .col-sm-4 { flex: 0 0 33.33%; }
  .col-sm-5 { flex: 0 0 41.66%; }
  .col-sm-6 { flex: 0 0 50%; }
  .col-sm-7 { flex: 0 0 58.33%; }
  .col-sm-8 { flex: 0 0 66.66%; }
  .col-sm-9 { flex: 0 0 75%; }
  .col-sm-10 { flex: 0 0 83.33%; }
  .col-sm-11 { flex: 0 0 91.66%; }
  .col-sm-12 { flex: 0 0 100%; }
  
  .hidden-sm {
    display: none;
  }
  
  @media only screen and (min-width: 33.75rem) {  /* ~540px */
  }
  
  @media only screen and (min-width: 45rem) {  /* ~720px */
    .col-1 { flex: 0 0 8.33%; }
    .col-2 { flex: 0 0 16.66%; }
    .col-3 { flex: 0 0 25%; }
    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
    .col-4 { flex: 0 0 33.33%; }
    .col-5 { flex: 0 0 41.66%; }
    .col-6 { flex: 0 0 50%; }
    .col-7 { flex: 0 0 58.33%; }
    .col-8 { flex: 0 0 66.66%; }
    .col-9 { flex: 0 0 75%; }
    .col-10 { flex: 0 0 83.33%; }
    .col-11 { flex: 0 0 91.66%; }
    .col-12 { flex: 0 0 100%; }
  
    .hidden-sm { display: block; }
  }
  
  @media only screen and (min-width: 60em) { /* ~960px */
  }
  
  /* 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;
  }