📐 База Возьми за основу 8px (или 4px). Умножай — 8, 16, 24, 32, 40... Так всё будет гармонично

🔲 Колонки Для сайтов чаще 12 колонок (гибко), для дашбордов — может быть 4, 6, 8. Между колонками — промежутки (gutter), они должны быть фиксированными.

🎯 Выравнивание Текст можно выравнивать по сетке, а вот изображения и крупные блоки — по визуальному весу. Используй направляющие, чтобы проверять выравнивание.

📏 Отступы Вертикальные отступы между секциями делай в 1.5–2 раза больше, чем горизонтальные. Правило: внутри блока отступы меньше, между разными блоками — больше.

🌐 Адаптив На мобилке колонки часто превращаются в 2–4. Главное — оставь постоянные боковые поля (паддинги). Сетка может «уплотняться» на маленьких экранах — уменьшай промежутки.

💡 Быстрое выравнивание Если элемент «пляшет», проверь, выровнен ли он по сетке или хотя бы по другому элементу. Сгруппируй элементы в блок, и выравнивай уже блок.

✨ Фишка Сетка — твой помощник, а не тюремщик. Сначала логика и удобство, потом строгое следование.