Макетирование и сеточные системы

Что это такое

Содержимое привязывается к набору колонок, промежутков и полей, а на точках перелома это расположение меняется — так колонки, поля и точки перелома вместе и составляют сеточную систему. Экраны она делает предсказуемыми: читатель усваивает, где начинается содержимое и какой ширины оно идёт, а дальше то же расположение держится на каждой странице.

Почему это важно

Без сетки каждый экран позиционируется на глаз и уезжает на несколько пикселей за раз, пока продукт не станет выглядеть ручной работой в плохом смысле. Однако стоит завести сетку — и у дизайнера, ставящего блок, появляется небольшой набор позиций, а инженер знает, что строить, не измеряя, — ведь сетка задаёт ещё и длину строки основного текста с размером изображений, поэтому типографика, отступы и адаптивное поведение меняются вместе с ней.

Что в этом треке

Колонки и промежутки (03-design-ux/30-layout-grid-systems/01-columns-and-gutters) — выбор числа колонок и расстояний между ними и вокруг них.
Точки перелома (03-design-ux/30-layout-grid-systems/02-breakpoints) — где расположение меняется и на что именно.

Предварительные требования

Визуальный дизайн (03-design-ux/10-visual-design)

Что читать дальше

Визуальный дизайн (03-design-ux/10-visual-design) — прочтите это первым; сетка — то, что делает выравнивание системным.
Каскадные таблицы стилей (CSS) (02-frontend/05-css) — реализация: режимы раскладки, которые ставят содержимое на сетку в браузере.
Адаптивный веб-дизайн (02-frontend/10-responsive-web-design) — более широкая практика приспособления раскладки к устройствам.
Типографика (03-design-ux/28-typography) — длина строки, под которую выбирают колонки.