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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

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

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

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

Физическое	Логическое (горизонтальный LTR)
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-top	margin-block-start
margin-bottom	margin-block-end
width	inline-size
height	block-size
left / right	inset-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-*.

---

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

.form-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.form-row label {
  inline-size: 8rem;
  text-align: end;
  margin-inline-end: 0.5rem;
}

[dir="rtl"] .form-row label {
  text-align: start;
}

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

---

Subgrid в CSS Grid

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

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

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.card {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4; /* занимает 4 колонки родителя */
}

.card__header,
.card__body,
.card__footer {
  grid-column: 1 / -1; /* на всю ширину subgrid */
}

Для строк:

.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, а не заменяют его.

---