Хватит использовать чужую сетку

Часто сталкиваюсь с предложениями использовать уже готовую сетку в новом проекте. Я считаю, что в большинстве случаев под каждый проект надо писать свою сетку.

Проекты разные

Если это не шаблонное решение, под каждый проект дизайнер создает уникальное решение.

Вот пример из реальной жизни. Имеем два блока с товарами. На десктопе они отображаются следующим образом:

Сетка для десктопа

В мобильной версии блоки на сером фоне просто уменьшаются, а популярные товары скроллятся горизонтально.

Сетка для мобилы

Если бы это был бутстрап или любая другая готовая сетка, пришлось бы придумывать костыли для переопределения стилей.

В проекте может быть несколько сеток

Например, сетка общего лейаута и сетка, по которой строится список товаров.

Сетка R1

Сетка Политеха

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

Своя рубашка ближе к телу

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

Самый простой пример сетки

$width: 960px;   // Ширина страницы
$columns: 12;    // Количество колонок
$col_margin: 0;  // Отступы между колонками

// Считаем ширину одной колонки
$col_width: ($width - ($col_margin * ($columns - 1))) / $columns;
$col_total_width: $col_width + $col_margin;

// Миксин для одной колонки
@mixin col($n: 1) {
  float: left; // Просто для примера. Можно выбрать display-inline или модель flexbox
  @include span($n);
}

// Чтобы не задачать размеры и не плодить кучу .col-x в html,
// можно у блоков задавать размер вот таким образом
//.section { @include row; }
//.main { @include col(4); }
//.sidebar { @include col(2); }

@mixin span($n: 1) {
  width: ($n * $col_width) + (($n - 1) * $col_margin);
  min-height: 1px;
  @if $n == $columns {
    margin-right: 0;
  } @else {
    margin-right: $col_margin;
  }
}

// Генерируем список блоков сетки
// .col-1
// ...
// .col-12
@for $i from 1 through $columns {
  .col-#{$i} {
    @include col($i);
  }
}

Создавая свою сетку вы действуете осознанно и не тянете в проект лишний код.