Susy 3

Общая настройка Susy для всех сеток:

$susy: (
    'columns': susy-repeat(12),
    'gutters': 30px,
    'spread': 'wide',
    'container-spread': 'wide',
);

Float

Сетка на float со спредом в режиме narrow

Колонки (span) имеют с правой стороны отступ равный полному gutters(), поэтому у последнего блока обнуляем правый margin

.grid{
    &__item{
      float: left;
      margin-right: gutter();
      &:last-child{
        margin-right: 0;
      }
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 narrow);
}
[data-span="3"]{
  width: span(3 narrow of 12 narrow);
}
[data-span="4"]{
  width: span(4 narrow of 12 narrow);
}

Сетка на float со спредом в режиме wide

Внешний контейнер имеет отрицательные margin равные половине gutter().
Колонки (span) имеют с обеих сторон отступы равные половине gutters()

Аналогично формируется сетка в Bootstrap 3

Замечание: по умолчанию спреды в наших настройках susy имеют режим wide, поэтому мы явно не указываем в scss ключевое слово wide

.grid{
    margin-left: - gutter()/2;
    margin-right: - gutter()/2;
    &__item{
      float: left;
      padding: 0 gutter()/2;
    }
}
[data-push="1"]{
  margin-left: span(1);
}
[data-span="3"]{
  width: span(3);
}
[data-span="4"]{
  width: span(4);
}

Сетка на float со спредом в режиме wider

Внешний контейнер имеет отрицательные margin равные gutter().
Колонки (span) имеют с обеих сторон отступы равные gutter() и компенсирующий отрицательный margin справой стороны равный gutter()

.grid{
    margin-left: - gutter();
    margin-right: - gutter();
    &__item{
      float: left;
      padding: 0 gutter();
      margin-right: - gutter();
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 wider);
}
[data-span="3"]{
  width: span(3 wider of 12 wider);
}
[data-span="4"]{
  width: span(4 wider of 12 wider);
}

Flexbox

Сетка на flex со спредом в режиме narrow

Колонки (span) имеют с правой стороны отступ равный полному gutters(), поэтому у последнего блока обнуляем правый margin

.grid{
    display: flex;
    flex-direction: row;
    &__item{
      margin-right: gutter();
      &:last-child{
        margin-right: 0;
      }
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 narrow);
}
[data-span="3"]{
  width: span(3 narrow of 12 narrow);
}
[data-span="4"]{
  width: span(4 narrow of 12 narrow);
}

Сетка на flex со спредом в режиме wide

Внешний контейнер имеет отрицательные margin равные половине gutter().
Колонки (span) имеют с обеих сторон отступы равные половине gutters()

Аналогично формируется сетка в Bootstrap 4

Замечание: по умолчанию спреды в наших настройках susy имеют режим wide, поэтому мы явно не указываем в scss ключевое слово wide

.grid{
    display: flex;
    flex-direction: row;
    margin-left: - gutter()/2;
    margin-right: - gutter()/2;
    &__item{
      padding: 0 gutter()/2;
    }
}
[data-push="1"]{
  margin-left: span(1);
}
[data-span="3"]{
  flex: 1 1 span(3);
}
[data-span="4"]{
  flex: 1 1 span(4);
}

Сетка на flex со спредом в режиме wider

Внешний контейнер имеет отрицательные margin равные gutter().
Колонки (span) имеют с обеих сторон отступы равные gutter() и компенсирующий отрицательный margin справой стороны равный gutter()

.grid{
    display: flex;
    flex-direction: row;
    margin-left: - gutter();
    margin-right: - gutter();
    &__item{
      padding: 0 gutter();
      margin-right: - gutter();
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 wider);
}
[data-span="3"]{
  width: span(3 wider of 12 wider);
}
[data-span="4"]{
  width: span(4 wider of 12 wider);
}

CSS grid

Сетка на grid со спредом в режиме narrow

Использовать susy для верстки сеток на css grid не требуется, если вам достаточно задавать размеры в единицах fr.
Если же важны %, то susy может помочь справиться с математическими вычислениями. CSS grid имеет встроенную поддержку gutters (отступов), поэтому спреды wide и wider тут не уместны.

Замечание: если в настройках susy вы сразу будете использовать спреды narrow, то в приведенном ниже примере фразы narrow можно не писать.

.grid{
    display: grid;
    grid-template-columns:
      span(1 narrow of 12 narrow)
      span(4 narrow of 12 narrow)
      span(3 narrow of 12 narrow)
      span(4 narrow of 12 narrow);
    grid-column-gap: gutter();
    &__item{

    }
}