scss grid.scss

Posted 2021-05-17

/*
    Создает отступы между ячейками сетки
    Если передать 0 - отступы будут обнулены (например для переопределения уже имеющихся)
    null - отступы не будут созданы \ переопределены
 */
@mixin grid-gutters(
  $gutterH: 12px, // Расстояние между ячейками по горизонтали
  $gutterV: null // Расстояние между ячейками по вертикали
) {
  @if ($gutterH != null) {
    margin-left: -$gutterH / 2;
    margin-right: -$gutterH / 2;
  }
  @if ($gutterV != null) {
    margin-bottom: -$gutterV / 2;
    margin-top: -$gutterV / 2;
  }

  /*
      Если ячеек нет - делаем распорку
      К сожалению работает только если внутри совсем ничего нет, даже пробела
  */
  @if ($gutterV != 0 and $gutterV != null) {
    &:empty::after {
      content: '';
      height: $gutterV;
    }
  }

  & > * {
    @if ($gutterH != null) {
      padding-left: $gutterH / 2;
      padding-right: $gutterH / 2;
    }
    @if ($gutterV != null) {
      padding-bottom: $gutterV / 2;
      padding-top: $gutterV / 2;
    }
  }
}

/*
    Создает ячейку сетки
*/
@mixin grid-item() {
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  /*
    Костыли для IE
    Проблема во вложенных флексах, IE растягивает контейнеры
    в зависимости от контента пока не указать min размеры,
    причем указать их надо с размерностью.
   */
  min-width: 1px;
  min-height: 1px;
}

/*
    Создает сетку
    Все непосредственно вложенные элементы станут ячейками сетки
    Ячейка не может являться сеткой,
    если нужно делать вложенные сетки - создавай новый элемент с сеткой внутри ячейки
*/
@mixin grid(
  $gutterH: 12px, // Расстояние между ячейками по горизонтали
  $gutterV: null, // Расстояние между ячейками по вертикали
  $inline: false // Делает сетку, размер которой зависит от контента
) {
  @if ($inline) {
    display: inline-flex;
    vertical-align: top; // Избавляет от магических вертикальных отступов при $gutterV > 0
  } @else {
    display: flex;
  }
  flex-wrap: wrap;
  @include grid-gutters($gutterH, $gutterV);

  & > * {
    @include grid-item;
  }
}
/*
Использование:
<div class="grid">
    <div class="grid__item">...</div>
    <div class="grid__item">...</div>
    ...
</div>
.grid {
    @include grid($gutterH: 20px); // сделать сетку с расстоянием между колонками 20px
    &__item {
        width: 25%; // 4 колонки
        @media (max-width: 600px) {
                width: 50%; // 2 колонки на маленьком экране
        }
    }
}
 */