Сетки 8pt, которые упростят жизнь вам и вашим коллегам разработчикам. О том, как подружить базовую сетку 8pt c колоночной, можно почитать тут — 8pt Grid for Web. Или мой Калькулятор.
Огромное спасибо, цифровому дизайнеру Дмитрию Симбереву, за статью и проделанную работу, а GUI дизайнеру Богдану Сломчинскому за 8pt сетки для адаптивного веб-дизайна в Adobe XD.
Для настольных
- Desktop (≥1200px):
- Grid — 1152px
- Columns — 12
- Column Width — 64px
- Gutter — 32px
Для планшета
- Tablet (≥768px):
- Grid — 672px
- Columns — 12
- Column Width — 40px
- Gutter — 16px
Для телефона
- Phone (<768px):
- Grid — 288px
- Columns — 4
- Column Width — 56px
- Gutter — 16px
