ragrid.scss

// shared styles for columns and rows
// yes it's a general namespace, how many othe grids are you importing?
// it reads so nice in the HTML and CSS right? =)
[grid] {
  display: flex;
  flex-wrap: wrap;
  
  // https://developer.mozilla.org/en-US/docs/Web/CSS/contain
  contain: layout;
  
  &[order~="reverse"] {
    flex-direction: row-reverse;
  }
  
  /*
  ALIGN
    - Horizontal: Left, Center, Right
    - Vertical: Top, Center, Bottom
  */
  &[horizontally-aligned~="left"] {
    justify-content: flex-start;
  }
  &[horizontally-aligned~="center"] {
    justify-content: center;
  }
  &[horizontally-aligned~="right"] {
    justify-content: flex-end;
  }
  &[vertically-aligned~="top"] {
    align-items: flex-start;
  }
  &[vertically-aligned~="center"] {
    align-items: center;
  }
  &[vertically-aligned~="bottom"] {
    align-items: flex-end;
  }
  &[vertically-aligned~="baseline"] {
    align-items: baseline;
  }
  
  /*
  DISTRIBUTE
    - Horizontal: Left, Center, Right
    - Vertical: Top, Center, Bottom
  */
  &[horizontally-distributed~="around"] {
    justify-content: space-around;
  }
  &[horizontally-distributed~="between"] {
    justify-content: space-between;
  }
  &[horizontally-distributed~="equal"] {
    > * {
      flex-grow: 1;
    }
  }
  &[vertically-distributed~="around"] {
    align-content: space-around;
  }
  &[vertically-distributed~="between"] {
    align-content: space-between;
  }
  &[vertically-distributed~="equal"] {
    align-items: stretch;
  }
      
  /*
  SIZE
    - Instead of col-xs-12 or whatever
    - Specify size on the parent
  */
  &[columns~="2"] > * {
    flex-basis: (100% / 2);
  }
  &[columns~="3"] > * {
    flex-basis: (100% / 3);
  }
  &[columns~="4"] > * {
    flex-basis: (100% / 4);
  }
  &[columns~="5"] > * {
    flex-basis: (100% / 5);
  }
  &[columns~="6"] > * {
    flex-basis: (100% / 6);
  }
  &[columns~="7"] > * {
    flex-basis: (100% / 7);
  }
  &[columns~="8"] > * {
    flex-basis: (100% / 8);
  }
  &[columns~="9"] > * {
    flex-basis: (100% / 9);
  }
  &[columns~="10"] > * {
    flex-basis: (100% / 10);
  }
  &[columns~="11"] > * {
    flex-basis: (100% / 11);
  }
  &[columns~="12"] > * {
    flex-basis: (100% / 12);
  }
}

// column specific
[grid~="columns"] {
  &[vertically-distributed~="equal"] {
    align-items: stretch;
    > * {
      height: auto;
    }
  }
}
    
// row specific 
[grid~="rows"] {
  flex-direction: column;
  align-items: flex-start;
  
  &[order~="reverse"] {
    flex-direction: column-reverse;
  }
  &[horizontally-aligned~="center"] {
    align-items: center;
  }
  &[horizontally-aligned~="right"] {
    align-items: flex-end;
  }
  
  &[vertically-distributed~="around"] {
    justify-content: space-around;
  }
  &[vertically-distributed~="between"] {
    justify-content: space-between;
  }
  &[vertically-distributed~="equal"] {
    > * {
      width: initial;
    }
  }
}

[grid~="masonry"] {
  flex-flow: column wrap;
  height: 20rem;
}