Перейти к основному содержимому

Логические свойства CSS и subgrid

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору

Физические и логические оси​

Классические свойства привязаны к экрану — left, width, margin-top. При смене языка (RTL), вертикальной вёрстке или печати "верх" и "лево" перестают совпадать с направлением чтения.

Логические свойства описывают отступы и размеры относительно потока текста:

ФизическоеЛогическое (горизонтальный LTR)
margin-leftmargin-inline-start
margin-rightmargin-inline-end
margin-topmargin-block-start
margin-bottommargin-block-end
widthinline-size
heightblock-size
left / rightinset-inline-start / inset-inline-end

Сокращения:

.card {
  margin-inline: 1rem;   /* start + end по inline-оси */
  padding-block: 0.5rem 1rem;
  border-inline-start: 3px solid #2563eb;
}

При direction: rtl inline-start окажется справа — не нужно дублировать правила [dir="rtl"] .card { margin-right: … }.

writing-mode​

Меняет, где "inline", а где "block":

.vertical-label {
  writing-mode: vertical-rl;
  inline-size: 2rem;
}

Полезно для подписей осей, азиатской типографики, боковых вкладок. Flex и Grid учитывают writing-mode при align-* и justify-*. Таблицы значений -content, -items и -self для сетки — в статье "Flexbox и CSS Grid".

Практика — форма и карточка​

Код ITЗагрузка примера кода…

Один набор правил работает в LTR и RTL без зеркальных копий файла.

Subgrid в CSS Grid​

В Flexbox и Grid дочерняя сетка по умолчанию не знает о линиях родителя: колонки карточек внутри ячейки могут не совпасть с колонками страницы.

subgrid передаёт треки родителя потомку:

Код ITЗагрузка примера кода…

Для строк:

.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.panel {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2;
}

Поддержка и fallback​

Subgrid поддерживают современные Chrome, Firefox, Safari. Fallback: явные grid-template-columns в компоненте или Flex без совпадения линий.

Связь с container queries​

Адаптивный дизайн и @container реагируют на ширину контейнера; логические свойства — на направление текста. В карточке внутри sidebar часто сочетают:

.card {
  container-type: inline-size;
  padding-inline: 1rem;
}

@container (min-width: 280px) {
  .card__title {
    font-size: 1.25rem;
  }
}

Краткий итог​

Логические свойства (margin-inline, block-size, …) делают вёрстку устойчивой к RTL и writing-mode. Subgrid выравнивает внутреннюю сетку компонента с сеткой страницы. Оба приёма дополняют Grid из главы Flex и Grid, а не заменяют его.

Содержание