Flexbox Grid

grid.less

/* 
Grid and breakpoints
*/

@gutter-width: 0.5rem;
@outer-margin: 2rem;
@gutter-compensation: calc((@gutter-width * 0.5) * -1);
@half-gutter-width: calc((@gutter-width * 0.5));
@xs-bp:30rem;

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  @media (max-width: @xs-bp) {
    display: block;
  }

  .col:first-child {
    margin-left:0;
  }

  .col:last-child {
    margin-right:0;
  }

  .col {
    flex:1;
    margin: @half-gutter-width;

    @media (max-width: @xs-bp) {
      display: block;
      width:100%;
      margin:0;
    }
  }

  .col.no-gutter {
    margin:0;
  }

  .col.no-gutter-x {
    margin-left:0;
    margin-right:0;
  }

  .col.no-gutter-y {
    margin-top:0;
    margin-bottom:0;
  }

  /*
  Default column widths
  */

  ._25 {
    flex:2.5;
  }

  ._33 {
    flex:3.3;
  }

  ._66 {
    flex:6.6;
  }

  ._50 {
    flex:5;
  }

  ._75 {
    flex:7.5;
  }
}