Как привязать колонки к сетке в Material?

Question

[sketchtooler]

Немного озадачен тем, что в гайдлайнах по Material Design указаны примеры с устройствами в 360px (4 колонки), 600px (8 колонок), 1280px (12 колонок).

Если при этих размерах экранов положить сетку, плотностью в 8px, то колонки выходят за границы сетки. Понимаю, что это так быть не должно, поэтому интересует, каким образом их можно правильно привязать.

P.S. Интересует также, под какие размеры экранов проектируете дизайн Вы? Всегда ли это 360px или 320px, если это мобильные? Какой размер для планшета, ноута, десктопа будет подходящим, при котором сетка и колонки "дружат"?

P.P.S. Делаю дизайн дэшборда для портфолио, и хотелось представить развернутый кейс с применением Material.

Answer 1

[Alexey Skalkin]

Здравствуйте, sketchtooler!

В гайдлайне указаны не 360 px и не 600 px, а 360 dp и 600 dp. Разница между такими значениями есть. Советую еще раз обратиться к гайдлайну, т.к. у меня не так много знаний в этой области и чтобы я ненароком не дезинформировал вас.
https://material.io/design/layout/pixel-density.ht...

Но опыт создания сетки есть.
Например я делал Дашборд из 12 колонок и 12 строк и это помогло мне аккуратно расположить элементы на макете.
Также для нижней навигации в мобильной версии сайта я использовал колонки. Количество колонок строго зависят у меня от количества элементов в навигационной панели. Например, если у меня в ней Поиск, Меню и Профиль, то и колонок в ней будет 3 штуки.

И еще, попробуйте посмотреть другие работы, в которых по-любому будут использовать колонки, чтобы вы смогли для себя понять нужные пропорции колонок для каждого типа устройств.
Надеюсь я помог вам с ответом.
Желаю удачи!