<commit_before>@import "_less.less";

.flex-grid-container {
  @_flex-gutter: 16px;
  @_flex-gutter--half: (@_flex-gutter / 2);

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  min-height: 200px;

  @media (min-width: @screen-sm-min) {
    margin-left:  -@_flex-gutter--half;
    margin-right: -@_flex-gutter--half;
  }

  &.flex-grid-container--equal-height {
    align-items: stretch;
  }

  .flex-grid__item {
    flex: 0 0 auto;
    margin-bottom: (@_flex-gutter + 1px);
    width: 100%;
    margin-left:  @_flex-gutter--half;
    margin-right: @_flex-gutter--half;
  }
  &.flex-grid-container--columns-5 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 3 ) - @{_flex-gutter} )";
      }
    }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 4 ) - @{_flex-gutter} )";
      }
    }
    @media (min-width: @screen-lg-min) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 5 ) - @{_flex-gutter} )";
      }
    }
  }
  &.flex-grid-container--columns-4 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 2 ) - @{_flex-gutter} )";
      }
    }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 3 ) - @{_flex-gutter} )";
      }
    }
    @media (min-width: @screen-lg-min) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 4 ) - @{_flex-gutter} )";
      }
    }
  }
  &.flex-grid-container--columns-3 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 2 ) - @{_flex-gutter} )";
      }
    }
    @media (min-width: @screen-md-min) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 3 ) - @{_flex-gutter} )";
      }
    }
  }
  &.flex-grid-container--columns-2 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      margin-left:  0;
      margin-right: 0;
    }

    @media (min-width: @screen-md-min) {
      .flex-grid__item {
        max-width: ~"calc( ( 100% / 2 ) - @{_flex-gutter} )";
      }
    }
  }
}<commit_msg>Edge and IE round calc( 100% / 3 ) up, making the items slightly too large to fit 3-up. Hardcoding 33.33% works in all browsers. I made all the rest be hardcoded percentages for consistency.<commit_after>@import "_less.less";

.flex-grid-container {
  @_flex-gutter: 16px;
  @_flex-gutter--half: (@_flex-gutter / 2);

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  min-height: 200px;

  @media (min-width: @screen-sm-min) {
    margin-left:  -@_flex-gutter--half;
    margin-right: -@_flex-gutter--half;
  }

  &.flex-grid-container--equal-height {
    align-items: stretch;
  }

  .flex-grid__item {
    flex: 0 0 auto;
    margin-bottom: (@_flex-gutter + 1px);
    width: 100%;
    margin-left:  @_flex-gutter--half;
    margin-right: @_flex-gutter--half;
  }
  &.flex-grid-container--columns-5 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .flex-grid__item {
        max-width: ~"calc( 33.33% - @{_flex-gutter} )"; // 3-up
      }
    }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .flex-grid__item {
        max-width: ~"calc( 25% - @{_flex-gutter} )"; // 4-up
      }
    }
    @media (min-width: @screen-lg-min) {
      .flex-grid__item {
        max-width: ~"calc( 20% - @{_flex-gutter} )"; // 5-up
      }
    }
  }
  &.flex-grid-container--columns-4 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .flex-grid__item {
        max-width: ~"calc( 50% - @{_flex-gutter} )"; // 2-up
      }
    }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      .flex-grid__item {
        max-width: ~"calc( 33.33% - @{_flex-gutter} )"; // 3-up
      }
    }
    @media (min-width: @screen-lg-min) {
      .flex-grid__item {
        max-width: ~"calc( 25% - @{_flex-gutter} )"; // 4-up
      }
    }
  }
  &.flex-grid-container--columns-3 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      .flex-grid__item {
        max-width: ~"calc( 50% - @{_flex-gutter} )"; // 2-up
      }
    }
    @media (min-width: @screen-md-min) {
      .flex-grid__item {
        max-width: ~"calc( 33.33% - @{_flex-gutter} )"; // 3-up
      }
    }
  }
  &.flex-grid-container--columns-2 {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      margin-left:  0;
      margin-right: 0;
    }

    @media (min-width: @screen-md-min) {
      .flex-grid__item {
        max-width: ~"calc( 50% - @{_flex-gutter} )"; // 2-up
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.1999596855472687, 'fraction_numerical': 0.02297923805684338, 'mean_word_length': 2.059186189889026, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '116267', 'n_tokens_mistral': 2115, 'n_tokens_neox': 2003, 'n_words': 342}