Вирівнюємо контейнер в межах сітки

Будь-який контент у більшості випадків буде в середині сітки.
Винятки:
- Фонове зображення, фон (як частина дизайну)
- Закріплені елементи (кнопка передзвонити і тп.)
Послідовність вирівнювання
– для схожих елементів

– між розділами

Вертикальний ритм

Відступи в межах сітки

Будь-які відступи, від тексту або зображень чи краю фігури – не повинні вилазити за межі сітки
Вирівнюйте однакові елементи по вертикалі

- Не обовʼязково, але зазвичай добре
Послідовне вирівнювання
– тексту

– зображення

Систематичність розмірів (зображень)

Заповнення відносно осі (по найбільшій картці)

- Задаємо мінімальну висоту для картки – щоб усі існуючі картки були одного розміру
Вирівнювання навігації

На відміну від загального дизайну сторінки, окремі компоненти, як-от елементи навігації, не повинні суворо відповідати макету сітки. Більш ніж добре дозволити їм жити за власними правилами, якщо вони не шкодять іншим елементам і не виглядають надто недоречно
Роздільники (лінії) в межах сітки

Зберігайте вміст у колонках

- Не обовʼязково, іноді достатньо загальної групи/компонента
Адаптуйте розмір контейнера, а не сітку

Слід пам’ятати: під час використання системи сіток, адаптуй розмір контейнера, а не сітки.
Вертикальний ритм – типографіка

Базові сітки / 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 (для деяких елементів)

