Модуль 3 · урок 9 з 11

Багатопанельний layout

Тепер зберемо все разом: розмітку з модуля 1 треба перетворити на дашборд — кілька панелей, кожна зі своїм скролом, точне вирівнювання, фіксована десктопна роздільність. Це саме те, що названо в таблиці «multi-pane dashboard layout with precise pixel alignment».

Каркас

<!-- app.html -->
<div class="shell">
  <app-header class="shell__header" />
  <app-sidebar class="shell__aside" />
  <main class="shell__main">
    <router-outlet />
  </main>
</div>

.shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "aside  main";
  height: 100dvh;            /* саме height, не min-height */
}

.shell__header { grid-area: header; }
.shell__aside  { grid-area: aside; overflow-y: auto; }
.shell__main   { grid-area: main; overflow: hidden; }   /* скрол буде всередині панелей */

Панель зі своїм скролом

.pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;   /* шапка, тіло, підвал */
  min-height: 0;                                  /* рятує у flex-контексті */
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  background: var(--color-surface);
}

.pane__head { padding: 12px 16px; border-bottom: 1px solid var(--color-rule); }
.pane__body { overflow-y: auto; }                 /* скрол саме тут */
.pane__foot { padding: 8px 16px; border-top: 1px solid var(--color-rule); }

Точне вирівнювання

«Precise pixel alignment» на практиці означає кілька дрібниць, які найчастіше й видають недбалу верстку:

• Однакова висота рядів. Заголовки панелей мають бути однієї висоти — задай її змінною --pane-head-h, а не набирай падінгами на око.
• Спільна сітка відступів. Усі проміжки кратні базовій одиниці (найчастіше 4px).
• Вирівнювання по вертикальній лінії. Ліві краї заголовка панелі, її вмісту й підвалу мають збігатись — це помітно навіть неозброєним оком.
• Рамки не подвоюються. Дві сусідні панелі з власними рамками дають 2px замість 1px: або gap між ними, або рамка лише з одного боку.

:root {
  --space: 4px;
  --pane-head-h: 44px;
  --pane-gap: calc(var(--space) * 4);   /* 16px */
}

Липкі заголовки всередині панелі

.pane__body { overflow-y: auto; }

.table__head th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);   /* обовʼязково: інакше вміст просвічує */
}

Тут спрацьовує правило з модуля 1: sticky липне до найближчого предка зі скролом. Оскільки скролиться саме .pane__body, шапка таблиці залипає в межах панелі — рівно те, що потрібно.

Фіксована десктопна роздільність

Формулювання ліда означає «без мобільної версії», а не «жорсткі пікселі». Робочий орієнтир — розтягуватись між 1280 і 1920, а нижче просто задати мінімум:

.shell {
  min-width: 1180px;   /* нижче зʼявиться горизонтальний скрол — це нормально для внутрішньої панелі */
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));   /* усередині все одно гнучко */
}