Правильная сетка

В интернете полно примеров сайтов, выполненных по модной 12-колоночной сетке. Это удобно, модульно, адаптивно и тому подобное.

Но есть один косяк — выравнивание текста. Посмотрите:

Или вот:

Классическая 12-колоночная сетка не приносит никакого порядка в систему внутренних отступов в блоках. В результате визуальная сетка разваливается, на странице бардак.

Я предлагаю в самом начале проекта определить значение внутреннего отступа (padding) для блоков и использовать его независимо от того, есть ли у блока обрамление или нет. Этому поможет наша 12-колоночная сетка, но ее нужно изменить. Добавим паддинги всем колонкам:

Теперь мы выравниваем все тексты по яркой границе, а обрамления по тусклой. Вот так:

Теперь ваши сайты будут ровными.