lbry.com/web/scss/—/_grid.scss

// $gutter_fluid: 4;

[class*="span"] {
  min-height: 1px;
  max-width: 100%;
}

.span12 {
  width: 100%;
}

.span11 {
  width: 91.666%;
}

.span10 {
  width: 83.333%;
}

.span9 {
  width: 75%;
}

.span8 {
  width: 66.666%;
}

.span7 {
  width: 58.333%;
}

.span6 {
  width: 50%;
}

.span5 {
  width: 41.666%;
}

.span4 {
  width: 33.333%;
}

.span3 {
  width: 25%;
}

.span2 {
  width: 16.666%;
}

.span1 {
  width: 8.333%;
}

.row-fluid,
.row-fluid-always {
  width: 100%;

  > [class*="span"] {
    float: left;
    // margin-left: 1% * $gutter_fluid;

    &:first-child {
      margin-left: 0;
    }
  }

  // $column_width: (100% - $gutter_fluid * 11) / 12;

  > .span12 {
    // width: $column_width * 12 + $gutter_fluid * 11;
  }

  > .span11 {
    // width: $column_width * 11 + $gutter_fluid * 10;
  }

  > .span10 {
    // width: $column_width * 10 + $gutter_fluid * 9;
  }

  > .span9 {
    // width: $column_width * 9 + $gutter_fluid * 8;
  }

  > .span8 {
    // width: $column_width * 8 + $gutter_fluid * 7;
  }

  > .span7 {
    // width: $column_width * 7 + $gutter_fluid * 6;
  }

  > .span6 {
    // width: $column_width * 6 + $gutter_fluid * 5;
  }

  > .span5 {
    // width: $column_width * 5 + $gutter_fluid * 4;
  }

  > .span4 {
    // width: $column_width * 4 + $gutter_fluid * 3;
  }

  > .span3 {
    // width: $column_width * 3 + $gutter_fluid * 2;
  }

  > .span2 {
    // width: $column_width * 2 + $gutter_fluid * 1;
  }

  > .span1 {
    // width: $column_width;
  }
}

.tile-fluid {
  width: 100%;

  > [class*="span"] {
    float: left;
  }
}

.column-fluid-constrained {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.row-fluid,
.tile-fluid,
.row-fluid-always {
  @include clearfix;
}

// @media (min-width: $width-laptop-min) {
//   .pull-left {
//     float: left;
//   }

//   .pull-right {
//     float: right;
//   }

//   .column-fluid {
//     display: flex;
//     flex-wrap: wrap;

//     > [class*="span"] {
//       display: flex;
//       flex-wrap: wrap;
//       flex: 1 0 auto;
//       overflow: hidden;
//       justify-content: center;
//     }
//   }
// }

// @media (max-width: $width-mobile-max) {
//   .row-fluid,
//   .tile-fluid,
//   .column-fluid {
//     width: 100%;
//   }

//   .pull-left,
//   .pull-right {
//     float: none;
//   }

//   [class*="span"] {
//     float: none !important;
//     width: 100% !important;
//     margin-left: 0 !important;
//     display: block !important;
//   }

//   .row-fluid,
//   .tile-fluid {
//     [class*="span"]:not(:last-child) {
//       margin-bottom: $spacing-vertical;
//     }
//   }
// }