Можно ли упростить эту пользовательскую сетку SCSS?

Question

Я написал эту сетку SCSS. Существует также переменная js, которая устанавливает максимальное количество элементов в строке (min = 4, max = 8). С помощью этой переменной я добавляю класс в оболочку сетки и получаю другой CSS.

Как вы можете видеть в FIDDLE , он отлично работает, но кажется, что он излишне сложен. Есть ли более элегантный способ написать этот SCSS?

.grid-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(100% + 20px);
  margin: 0 -10px;

  .grid-item,
  .grid-orphan {
    margin: 20px 10px 0;
    align-self: stretch;
    flex: 1;
    min-height: 1px;
    background-color: #0000CC;
    height: 50px;

  }

  .grid-orphan {
    height: 0;
    min-height: 0;
    margin: 0 10px;
  }

  /*

  EIGHT


  */
  &.eight {

    // eight
    @media screen and (min-width: 2201px) {
      .grid-item {
        min-width: calc(12.5% - 20px);
      }
    }

    // seven
    @media screen and (min-width: 2021px) and (max-width: 2200px) {
      .grid-item {
        min-width: calc((100% / 7) - 20px);

      }
    }

    // six
    @media screen and (min-width: 1827px) and (max-width: 2020px) {
      .grid-item {
        min-width: calc((100% / 6) - 20px);

      }
    }

    // five
    @media screen and (min-width: 1527px) and (max-width: 1826px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

      .grid-item {
        min-width: calc(50% - 20px);
      }
    }
  }

  /*

  SEVEN


  */
  &.seven {

    // seven
    @media screen and (min-width: 2021px) {
      .grid-item {
        min-width: calc((100% / 7) - 20px);
      }
    }

    // six
    @media screen and (min-width: 1827px) and (max-width: 2020px) {
      .grid-item {
        min-width: calc((100% / 6) - 20px);
      }
    }

    // five
    @media screen and (min-width: 1527px) and (max-width: 1826px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

      .grid-item {
        min-width: calc(50% - 20px);
      }
    }
  }

  /*

  SIX


  */
  &.six {

    // six
    @media screen and (min-width: 1827px) {
      .grid-item {
        min-width: calc((100% / 6) - 20px);
      }
    }

    // five
    @media screen and (min-width: 1527px) and (max-width: 1826px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

      .grid-item {
        min-width: calc(50% - 20px);
      }
    }
  }

  /*

  FIVE


  */
  &.five {

    // five
    @media screen and (min-width: 1527px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

      .grid-item {
        min-width: calc(50% - 20px);
      }
    }
  }

  /*

  FOUR


  */
  &.four {

    // four
    @media screen and (min-width: 1600px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }

    }

    // three
    @media screen and (min-width: 1200px) and (max-width: 1599px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 1199px) {
      justify-content: space-between;

      .grid-item {
        min-width: calc(50% - 20px);
      }
    }
  }

  @media screen and (min-width: 0) and (max-width: 600px) {
    justify-content: center;
    width: 100%;
    margin: 0;

    .grid-item {
      min-width: 100%;
      margin: 20px 0 0;

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

    .grid-orphan {
      min-width: 100%;
      margin: 0;
    }
  }
}

Answer 1

Вот прямое предложение по решению вашего макета с использованием CSS-сетки .

Я внес существенное изменение, начиная с самых маленьких экранов и выше, так что его проще использовать только min-width в ваших медиазапросах.

Если вам не нужно , нужно иметь различные настройки столбцов на основе вспомогательных классов, вы даже можете просто удалить все медиазапросы и разрешить правила для 8 столбцов. применимо для всех случаев.

Редактировать:

Вот упрощенная (о ирония) попытка:

.grid-wrap {
    display: grid;
    grid-gap: 20px;

    .grid-item,
    .grid-orphan {
        background-color: #0000cc;
        height: 50px;
    }

    // Breakpoints are initially the same in all columns variations
    @media screen and (min-width: 601px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (min-width: 1277px) {
        grid-template-columns: repeat(4, 1fr);
    }

    @media screen and (min-width: 1527px) {
        grid-template-columns: repeat(5, 1fr);
    }

    @media screen and (min-width: 1827px) {
        grid-template-columns: repeat(6, 1fr);
    }

    @media screen and (min-width: 2021px) {
        grid-template-columns: repeat(7, 1fr);
    }

    @media screen and (min-width: 2201px) {
        grid-template-columns: repeat(8, 1fr);
    }

    &.four {
        // Different breakpoint values in 4 column variations
        @media screen and (min-width: 601px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media screen and (min-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media screen and (min-width: 1600px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    &.five {
        // No overrides
    }

    &.six {
        // No overrides
    }

    &.seven {
        // No overrides
    }

    &.eight {
        // No overrides
    }
}

Answer 2

Вы можете начать с того, что у вас есть несколько миксов для тех, которые у вас есть более одного раза, чтобы сохранить вещи СУХИМЫМИ.

например

// two
@media screen and (min-width: 601px) and (max-width: 991px) {
  justify-content: space-between;

  .grid-item {
    min-width: calc(50% - 20px);
  }
}

становится:

@mixin two {
  @media screen and (min-width: 601px) and (max-width: 991px) {
    justify-content: space-between;

    .grid-item {
      min-width: calc(50% - 20px);
    }
  }
}

Затем во всех местах, где у вас есть первый блок кода выше, просто добавьте:

@include two;

Лучше всего назначить свои магические числа и sass vars, это будет выглядеть намного лучше. Вы могли бы потенциально задействовать несколько карт и циклов, но это не должно было действительно нуждаться.