Для глобальной сетки (взаиморасположение крупных блоков верхнего уровня) можно создать свой блок
.container, который будет центровщиком, а в разметке его примиксовывать или делать блоком оберткой (когда есть фон на 100%):
<div class="features container">
Some content
</div>
<div class="features">
<div class="container">
<section class="features__element">
some content
</section>
<section class="features__element">
some content
</section>
</div>
</div>
Затем, блокам сетки задать правила для адаптивности.
Например…// Каскад от Мобильных к Десктопам
.container {
width: 280px;
padding: 0 20px;
}
@media (min-width: 768px) {
.container {
width: 640px;
padding: 0 60px;
}
}
@media (min-width: 1200px) {
.container {
width: 960px;
padding: 0 100px;
}
}
Более мелкие блоки сетки — колонки, можно прописывать в файле конкретного блока, а если расположение колонок часто повторяется, то как элемент блока сетки.
