Sizing

Ширина, высота и ограничители min/max. Дробные ширины, единицы вьюпорта и адаптивные варианты.

Опциональный модуль packages/utils/scss/_sizing.scss

Ширина

Класс	CSS	Назначение
`.gr-w-full`	`width: 100%`	Вся ширина родителя
`.gr-w-screen`	`width: 100svw`	Вся ширина окна без полосы прокрутки
`.gr-w-auto`	`width: auto`	Ширина по умолчанию
`.gr-w-fit`	`width: fit-content`	По содержимому, но не шире родителя
`.gr-w-min`	`width: min-content`	Минимально возможная
`.gr-w-max`	`width: max-content`	По содержимому без переносов
`.gr-w-1/2`	`width: 50%`	Половина
`.gr-w-1/3`, `.gr-w-2/3`	`33.3333%`, `66.6667%`	Треть и две трети
`.gr-w-1/4`, `.gr-w-3/4`	`25%`, `75%`	Четверть и три четверти

Слэш в дробных классах пишется в разметке как есть — class="gr-w-1/2". Экранирование (.gr-w-1\/2) нужно только внутри CSS-селектора, и его берёт на себя сборка.

Дробные ширины

gr-w-full

gr-w-1/2

gr-w-1/3

gr-w-2/3

Высота

Класс	CSS
`.gr-h-full`	`height: 100%`
`.gr-h-screen`	`height: 100svh`
`.gr-h-auto`	`height: auto`
`.gr-h-fit`	`height: fit-content`

Единицы вьюпорта здесь малые — svw и svh. Они считают окно так, будто панели мобильного браузера раскрыты, поэтому блок не меняет высоту при прокрутке, а .gr-w-screen не вызывает горизонтальную прокрутку из-за ширины полосы прокрутки — в отличие от 100vw.

Ограничители

Класс	CSS	Когда нужен
`.gr-min-w-0`	`min-width: 0`	Снимает минимум flex-элемента — без него длинный текст растягивает колонку
`.gr-min-w-full`	`min-width: 100%`	Не уже родителя
`.gr-min-h-0`	`min-height: 0`	То же для вертикали в grid и flex
`.gr-min-h-full`	`min-height: 100%`	Не ниже родителя
`.gr-min-h-screen`	`min-height: 100svh`	Экран целиком — типичная обёртка страницы
`.gr-max-w-none`	`max-width: none`	Снять ограничение
`.gr-max-w-full`	`max-width: 100%`	Не шире родителя
`.gr-max-w-page`	`max-width: var(--gr-max-width)`	Ширина контента, та же, что у `.gr-container`
`.gr-max-h-full`	`max-height: 100%`	Не выше родителя
`.gr-max-h-screen`	`max-height: 100svh`	Не выше экрана — вместе с `.gr-overflow-y-auto` даёт прокручиваемую панель

Адаптивные варианты

Суффикс брейкпоинта есть у width и height: .gr-w-full → .gr-w-full-md. Ограничители min-* и max-* адаптивных вариантов не имеют — они задают рамку, одинаковую на всех ширинах, а меняют размер внутри неё сами width и height.

<!-- на мобильном во всю ширину, от 768px — половина -->
<div class="gr-w-full gr-w-1/2-md">…</div>

Примеры использования

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

Экран входа: во всю высоту, карточка по центру

Страницы логина, 404 и сплэш-экраны устроены одинаково: обёртке — .gr-min-h-screen, чтобы она занимала экран даже с коротким содержимым, и .gr-grid-place-center из ядра — центр по обеим осям одним классом. Карточке формы — пара «резиновость + предел»: .gr-w-full тянет её на узком экране, .gr-max-w-[380px] останавливает на широком.

<div class="gr-min-h-screen gr-grid-place-center gr-p-4">
  <form class="gr-w-full gr-max-w-[380px] gr-card gr-p-6">
    <h1 class="gr-text-xl gr-mb-4">Вход</h1>
    <div class="gr-field gr-mb-4">
      <label class="gr-label" for="login">Почта</label>
      <input class="gr-input" id="login" type="email">
    </div>
    <button class="gr-btn gr-btn-primary gr-btn-block">Войти</button>
  </form>
</div>

Центр экрана — .gr-min-h-screen .gr-grid-place-center (в демо высота ограничена)

Каркас страницы с прижатым футером

Классическая проблема: на короткой странице футер всплывает к середине экрана. Решение — три класса на каркасе: обёртке .gr-min-h-screen .gr-flex .gr-flex-col, основному блоку — .gr-flex-1, который забирает всю свободную высоту и утапливает футер к низу окна. Ширину контента внутри держит пара .gr-max-w-page .gr-mx-auto — тот же предел, что у .gr-container ядра, но собранный из утилит.

<body class="gr-min-h-screen gr-flex gr-flex-col">
  <header>…</header>
  <main class="gr-flex-1 gr-w-full gr-max-w-page gr-mx-auto gr-px-4">
    Короткий контент — а футер всё равно внизу.
  </main>
  <footer>…</footer>
</body>

Футер прижат: свободную высоту съедает .gr-flex-1 у main

Шапка

Короткий контент — а футер всё равно внизу.

Футер

Панель со своей прокруткой рядом с контентом

Двухколонник «список + содержимое»: на мобильном панель лежит над контентом (.gr-w-full), от 1024px встаёт слева в четверть ширины (.gr-w-1/4-lg плюс .gr-flex-row-lg на родителе). Длинный список не растягивает страницу: ограничитель .gr-max-h-screen с .gr-overflow-y-auto даёт панели собственную прокрутку. Контенту — знакомая по флексу пара .gr-flex-1 .gr-min-w-0: занять остаток и не распираться содержимым.

<div class="gr-flex gr-flex-col gr-flex-row-lg gr-gap">
  <aside class="gr-w-full gr-w-1/4-lg gr-max-h-screen gr-overflow-y-auto">
    …длинный список…
  </aside>
  <main class="gr-flex-1 gr-min-w-0">…содержимое…</main>
</div>

Панель — .gr-w-1/4-lg + свой скролл, контент — .gr-flex-1 .gr-min-w-0

Содержимое

Список слева прокручивается сам — страница остаётся на месте. В демо предел высоты уменьшен до .gr-max-h-[160px].

Ширина по содержимому

Три ключевых слова закрывают задачи «блок размером с содержимое». .gr-w-fit — самый ходовой: блочный элемент ужимается до содержимого, и его можно центрировать через .gr-mx-auto — так делается CTA-кнопка посреди секции. .gr-w-max запрещает переносы — ширина по самой длинной строке; .gr-w-min наоборот сжимает до самого длинного слова. Та же .gr-w-fit уже встречалась на странице Position — там она зауживает родителя до картинки, чтобы бейджи вставали по её углам.

<div class="gr-w-fit gr-mx-auto">
  <button class="gr-btn gr-btn-primary gr-btn-lg">Попробовать бесплатно</button>
</div>

Сравнение fit / max / min и центрирование через .gr-mx-auto

.gr-w-fit — по содержимому

.gr-w-max — без переносов

.gr-w-min — по слову

Фиксированные квадраты: иконки и аватары

Числовой шкалы .gr-w-10/.gr-h-10 в библиотеке нет намеренно: ходовые фиксированные размеры уже зашиты в компоненты ui — .gr-avatar-xs…-xl, .gr-btn-icon, — а разовый квадрат собирается парой произвольных значений .gr-w-[48px] .gr-h-[48px]. Центр содержимого внутри квадрата — всё тот же .gr-grid-place-center. Во флекс-ряду фиксированной фигуре полезен сосед-текст с .gr-min-w-0 — иначе длинная строка сожмёт квадрат.

<div class="gr-flex gr-gap-sm gr-flex-items-center">
  <span class="gr-w-[48px] gr-h-[48px] gr-radius-2 gr-bg-primary gr-text-white gr-grid-place-center">⚡</span>
  <div class="gr-min-w-0">
    <p class="gr-m-0 gr-font-semibold">Мгновенный старт</p>
    <p class="gr-m-0 gr-text-sm gr-text-ink-secondary">Иконка не сожмётся и не растянется.</p>
  </div>
</div>

Квадрат — произвольные .gr-w-[48px] .gr-h-[48px], готовые размеры — .gr-avatar-*

⚡

Мгновенный старт

Иконка не сожмётся и не растянется.

SM MD LG XL