@Rufix

Как настраивать модульную сетку?

Привет. У меня вопрос, он очень простой: какая сетка должна быть и можно ли ее настраивать как я захочу?
У одного человека увидел, что у него были вот такие настройки:
spoiler
5c8ac35842078014678570.png

Объясните пожалуйста, для чего делаются сбоку margin'ы по 150 пикселей и обязательны ли они? Могу ли я например сделать эти отступы по 50 пикселей? Могу ли я в разных блоках на одной и той же странице использовать разные сетки? То есть например слайдер в лендинге будет с 150 пикселей отступами, а дальше контент идет по 50 пикселей.
  • Вопрос задан
  • 381 просмотр
Решения вопроса 1
mixail_fet
@mixail_fet
Дизайнер веб-интерфейсов
Давайте разберемся коротко, но подробно:

1. Сетка может настраиваться так, как удобно вам и верстальщику. Смотрите на свои задумки, если вы хотите чтобы на FullHD мониторах (1080р) сайт отображался одним образом, а на ноутбуках другим - учитывайте сетку так, чтобы при адаптиве можно было сократить количество колонок и при этом элементы имели адаптивную логику.

2. Параметр Stretch в сетке говорит о том, что все элементы всегда будут адаптивные в ширину, и каким бы не был размер макета, элементы будут подстраиваться под размер, а параметр margin отвечает за отступ по бокам, который также оперяется по усмотрению дизайнера. Пример:

Такой подход используют всегда в мобильных приложениях, потому что стандарта по размеру экрана телефона - нет, каждая модель отличается масштабом, и зачастую из-за этого, приложения выглядят красиво только на одном экране, под который делался макет. Параметр Stretch исключает эту ошибку.

3. Если вы используете параметр Center, вам легче опередить контентную область, которая всегда будет фиксирована. Так пример, для сетки бустрап используется размер контентной области 1170px, и на ноутбуках, и на компьютерах сайт выглядит одинаково, единственное что меняется - это отступ по бокам.

Нашел для вас хорошую статью по сеткам: https://medium.com/@FigmaTips/%D1%81%D0%B5%D1%82%D...
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Эти 150px для того, чтоб в макете было пространство между границей контента и границей рабочей области. Или чтоб был виден задний фон, что он есть и он виден. Или что есть какая-то тень. Или еще какая-то свистелка.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы