Сетка и интервалы

Шаг 4dp#

Любой отступ и зазор в ките — одна из восьми ступеней. Между ними нет промежуточных значений, поэтому расстояния на экране повторяются и складываются в ритм.

Ширина содержимого страницы — --layout-width, 1200 пикселей. Боковые поля — --space-5.

Плотность#

Поле Плотность в оформлении умножает все ступени шага. Допустимы значения от 0,5 до 2, всё остальное заменяется единицей. Посетитель хранит плотность в cookie оформления рядом с темой и акцентом.

Плотность меняет отступы и зазоры, но не высоту управления: кнопка остаётся 36 пикселей, поле — 44. Так экран сжимается, а попадать пальцем и курсором так же легко.

И при единице кит плотнее спецификации Material: он рисует рабочие экраны — списки, формы, настройки, — и на экран должно входить столько же, сколько в прежнем ките 0.9.

На телефоне пункт колонки разделов дома настроек остаётся 44 пикселя — под палец.

Оформление по умолчанию.

Возвращаемое значение:
 Структура - Тема, Акцент, Плотность, Радиус.

Компонент «Сетка»#

Сетка раскладывает равнозначные блоки — карточки, плитки, кнопки — в ряд с переносом. Ячейки приходят готовой разметкой, сама сетка отвечает только за раскладку. Зазор между ячейками — --space-4.

Без поля Колонки ячейка занимает столько, сколько нужно её содержимому, и ряд переносится, когда место кончилось. Так раскладываются плитки сводки.

В дереве холста сетка собирается словами (см. Язык узлов): ячейки — дети узла, поля модели — слова Колонки, Плотная, ПолныеРяды, Заголовок.

Колонки#

Колонки — от 1 до 4. Колонки — настоящая CSS-сетка: ширину ячейки задаёт колонка, и она одинакова в любом ряду. У сеток в 3 и 4 колонки число — потолок: шире их не станет ни на каком мониторе, а на узком экране колонок меньше по точкам перелома. Поэтому шесть карточек в трёх колонках всегда заполняют ряды — 3 + 3, 2 + 2 + 2 или по одной, — и хвоста 4 + 2 не бывает.

Другое значение Колонки сетка не примет: число попадает в класс, поэтому оно сверяется со списком и превращается в «авто».

Карточка в ячейке тянется на всю высоту ряда, а полоса действий встаёт у её нижнего края. Описания разной длины не разводят кнопки по разным линиям.

Шесть карточек в трёх колонках ложатся двумя полными рядами; сузьте окно — ряды по две, потом по одной.

Полные ряды#

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

Сколько карточек класть, решает экран, и правило простое — число, которое делится на все ряды. Восемь карточек в Колонки(4).ПолныеРяды():

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

Сузьте окно: на средней ширине ряды по три, и седьмой с восьмой карточкой нет; ещё уже — снова все восемь, по две и по одной.

Как это устроено. Число карточек лист не знает, поэтому каждая ячейка находит себя сама: :nth-child — её место в ряду, :nth-last-child — сколько ячеек после неё. Первая ячейка ряда, после которой меньше ячеек, чем колонок, — начало хвоста, и она прячется (display: none) вместе с остальными ячейками хвоста. Правила стоят на тех же точках перелома, что и потолок колонок, и каждое действует только на своём отрезке ширин. Первый ряд не прячется никогда: три карточки в четырёх колонках остаются тремя, а не пустой сеткой.

Слово — только у сеток в 3 и 4 колонки. У двух колонок число рядов зависит от ширины ячейки (auto-fit), а не от точек перелома, и лист не знает, какой ряд неполный: ПолныеРяды у Колонки(1), Колонки(2) и «авто» останавливает сборку.

Секция со списком карточек на телефоне#

На телефоне (до 600 px) карточка или секция, в которой лежит сетка карточек объектов, становится плоской: без кольца, заливки и боковых полей, заголовок и пояснение — на поле страницы. Карточки объектов в ней остаются карточками, как на широком экране, во всю ширину экрана без полей страницы — на 390 это 358 пикселей. Таблица и одиночная карточка внутри карточки — частью родителя, как на странице Карточка.

Плотная сетка#

Плотная уменьшает зазор до --space-2. Она нужна мелким однородным блокам — кнопкам, чипам, — которым обычный зазор велик.

Пустая сетка#

Пустые ячейки сетка пропускает. Если не осталось ни одной, она не печатает ничего — пустая рамка на экран не попадёт. Что показать вместо пустоты, решает экран: обычно это пустое состояние.

Узлом холста#

На холсте сетка — узел, и каждый её ребёнок становится своей ячейкой. Сетка в общем ряду раскладок описана на странице раскладки.

Интервалом владеет контейнер#

У поля, тумблера и других блоков нет собственного внешнего отступа. Расстояние между соседями задаёт тот, кто их держит:

• форма столбиком (.form-stack) — зазором --space-3;
• тело карточки и тело секции настроек — отступом --space-4 над каждым соседом, кроме первого;
• сетка — зазором --space-4 или --space-2.

Почему не поле: отступ поля складывался с зазором контейнера, и формы дышали двойным ритмом 16 + 12. В строке отбора нижний отступ поля ещё и поднимал его над кнопкой рядом. Один владелец интервала лечит и то, и другое.

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

.report-filters {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

Без display: flex или grid свойство gap не работает — правило выглядит рабочим и ничего не делает.

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

Гайдлайны#

HTML = "<div class=""form-stack"">"
	+ Набор.Поле().Отрисовать(Новый Структура("Имя, Метка", "имя", "Имя"))
	+ Набор.Поле().Отрисовать(Новый Структура("Имя, Метка", "почта", "Почта"))
	+ "</div>";

HTML = "<div>"
	+ Набор.Поле().Отрисовать(Новый Структура("Имя, Метка", "имя", "Имя"))
	+ Набор.Поле().Отрисовать(Новый Структура("Имя, Метка", "почта", "Почта"))
	+ "</div>";

HTML = "<div style=""display:flex;gap:var(--space-2)"">"
	+ Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Назад", "вторичная"))
	+ Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Пропустить", "вторичная"))
	+ Набор.Кнопка().Отрисовать("Далее")
	+ "</div>";

HTML = "<div style=""display:flex"">"
	+ Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Назад", "вторичная"))
	+ "<span style=""width:3px""></span>"
	+ Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Пропустить", "вторичная"))
	+ "<span style=""width:13px""></span>"
	+ Набор.Кнопка().Отрисовать("Далее")
	+ "</div>";

Ячейки = Новый Массив();
Ячейки.Добавить(Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Описание, Действия",
	"Отчёты", "Сводки за неделю.", Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Открыть", "ссылка")))));
Ячейки.Добавить(Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Описание, Действия",
	"Источники", "Репозитории, ветки, ключи доступа и расписание сборки.",
	Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Открыть", "ссылка")))));

HTML = Набор.Сетка().Отрисовать(Новый Структура("Ячейки, Колонки", Ячейки, 2));

HTML = "<div style=""display:flex;align-items:flex-start;gap:var(--space-4)"">"
	+ Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Описание, Действия",
		"Отчёты", "Сводки за неделю.", Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Открыть", "ссылка"))))
	+ Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Описание, Действия",
		"Источники", "Репозитории, ветки, ключи доступа и расписание сборки.",
		Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант", "Открыть", "ссылка"))))
	+ "</div>";

Доступность#

• Заголовок сетки печатается aria-label: скринридер назовёт группу блоков («Сводка»), прежде чем читать их.
• Порядок ячеек в разметке — порядок чтения. Сетка его не переставляет: на узком экране блоки идут столбцом в том же порядке.
• Плотность ниже единицы сжимает зазоры, но не цели нажатия: высота кнопки и поля от неё не зависит.
• Карточка, которую ПолныеРяды не показывает, скрыта и от скринридера (display: none). Сетка с полными рядами — витрина, а не единственный путь: всё, что в ней может не показаться, должно быть доступно и по ссылке «Все…» под ней.

Модель#

Структура ниже — прежний вид модели: её получает набор, а в дереве холста те же поля задают слова Колонки, Плотная, ПолныеРяды и Заголовок.

Отрисовывает сетку равнозначных блоков.

Параметры:
 Модель - Структура - Ячейки (массив: ДОВЕРЕННЫЙ HTML строкой либо структура с полем
          HTML; пустые пропускаются), Колонки ("авто" | 1 | 2 | 3 | 4; 1 — стопка
          в один столбец), Заголовок (aria-label области), Плотная (уменьшенный зазор),
          ПолныеРяды (только у 3 и 4 колонок: ячейки неполного последнего ряда на каждой
          ширине не показываются — ряды всегда полные).

Возвращаемое значение:
 Строка - фрагмент <div class="grid"> либо "" для пустого набора ячеек.

Сетка равнозначных блоков: КАЖДЫЙ ребёнок узла становится своей ячейкой. Слова:
Колонки, Плотная, ПолныеРяды, Заголовок.

Параметры:
 Р1…Р8 - ЭлементЭкрана, Структура - (необязательные) ячейки сетки; Структура первым
         аргументом — прежний вид модели без поля Ячейки.

Возвращаемое значение:
 ЭлементЭкрана