Вирівнюємо контейнер в межах сітки
Будь-який контент у більшості випадків буде в середині сітки.
Винятки:
- Фонове зображення, фон (як частина дизайну)
- Закріплені елементи (кнопка передзвонити і тп.)
Послідовність вирівнювання
– для схожих елементів
– між розділами
Вертикальний ритм
Відступи в межах сітки
Будь-які відступи, від тексту або зображень чи краю фігури – не повинні вилазити за межі сітки
Вирівнюйте однакові елементи по вертикалі
- Не обовʼязково, але зазвичай добре
Послідовне вирівнювання
– тексту
– зображення
Систематичність розмірів (зображень)
Заповнення відносно осі (по найбільшій картці)
- Задаємо мінімальну висоту для картки – щоб усі існуючі картки були одного розміру
Вирівнювання навігації
На відміну від загального дизайну сторінки, окремі компоненти, як-от елементи навігації, не повинні суворо відповідати макету сітки. Більш ніж добре дозволити їм жити за власними правилами, якщо вони не шкодять іншим елементам і не виглядають надто недоречно
Роздільники (лінії) в межах сітки
Зберігайте вміст у колонках
- Не обовʼязково, іноді достатньо загальної групи/компонента
Адаптуйте розмір контейнера, а не сітку
Слід пам’ятати: під час використання системи сіток, адаптуй розмір контейнера, а не сітки.
Вертикальний ритм – типографіка
Базові сітки / baseline grids
Базові сітки або рядки допомагають налаштувати належне горизонтальне вирівнювання та інтервали для вашої типографіки чи інших елементів вашого дизайну.
8 Point grid
- Вирівнювання по сітці/вирівнювання без сітки
- Відступи та розміри кратні 8
Чому 8?
- Найбільш універсальна сітка, яку легко застосовувати для будь-яких розмірів екранів
Також іноді використовують 16 Point Grid, аналогічна стіка з розмірами елементів кратними 16
Сітки в material (8dp)
https://m2.material.io/design/layout/responsive-layout-grid.html#grid-customization
https://m2.material.io/design/layout/spacing-methods.html#baseline-grid
+ 4dp grid (для деяких елементів)
