Как настраивать модульную сетку?
Давайте разберемся коротко, но подробно:
1. Сетка может настраиваться так, как удобно вам и верстальщику. Смотрите на свои задумки, если вы хотите чтобы на FullHD мониторах (1080р) сайт отображался одним образом, а на ноутбуках другим - учитывайте сетку так, чтобы при адаптиве можно было сократить количество колонок и при этом элементы имели адаптивную логику.
2. Параметр Stretch в сетке говорит о том, что все элементы всегда будут адаптивные в ширину, и каким бы не был размер макета, элементы будут подстраиваться под размер, а параметр margin отвечает за отступ по бокам, который также оперяется по усмотрению дизайнера. Пример:spoilerhttps://images.ctfassets.net/1khq4uysbvty/3F3PbfHH...
Такой подход используют всегда в мобильных приложениях, потому что стандарта по размеру экрана телефона - нет, каждая модель отличается масштабом, и зачастую из-за этого, приложения выглядят красиво только на одном экране, под который делался макет. Параметр Stretch исключает эту ошибку.
3. Если вы используете параметр Center, вам легче опередить контентную область, которая всегда будет фиксирована. Так пример, для сетки бустрап используется размер контентной области 1170px, и на ноутбуках, и на компьютерах сайт выглядит одинаково, единственное что меняется - это отступ по бокам.
Нашел для вас хорошую статью по сеткам: https://medium.com/@FigmaTips/%D1%81%D0%B5%D1%82%D...
Эти 150px для того, чтоб в макете было пространство между границей контента и границей рабочей области. Или чтоб был виден задний фон, что он есть и он виден. Или что есть какая-то тень. Или еще какая-то свистелка.