Grid: дашборд

Grid-дашборд — административная панель с виджетами разных размеров, расположенными в явной или именованной Grid-раскладке.

Зачем нужно

Дашборды с виджетами — классический use case для Grid: разные виджеты занимают разное количество колонок и строк. Grid с 12-колоночной системой (как в Bootstrap) или именованными областями — стандартный подход. CSS Grid делает это без лишних классов-обёрток.

Где используется

  • Административные панели (CRM, аналитика)
  • Мониторинг-дашборды
  • Персональные кабинеты
  • IoT-интерфейсы
  • Отчётные панели

Основной контент

12-колоночная система

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 16px;
  padding: 16px;
}

/* Виджеты разных размеров */
.widget              { grid-column: span 4; }  /* 1/3 ширины */
.widget--half        { grid-column: span 6; }  /* 1/2 */
.widget--wide        { grid-column: span 8; }  /* 2/3 */
.widget--full        { grid-column: span 12; } /* полная */
.widget--tall        { grid-row: span 2; }     /* двойная высота */

Именованные области

.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "stats    stats    traffic"
    "revenue  orders   traffic"
    "table    table    table";
  gap: 16px;
}

.widget-stats   { grid-area: stats; }
.widget-traffic { grid-area: traffic; }
.widget-revenue { grid-area: revenue; }
.widget-orders  { grid-area: orders; }
.widget-table   { grid-area: table; }

Стили виджета

.widget {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.widget__value {
  font-size: 2rem;
  font-weight: bold;
  color: #111;
}

.widget__body {
  flex: 1;
  min-height: 0;
}

Адаптивный дашборд

@media (max-width: 1024px) {
  .dashboard {
    grid-template-columns: repeat(6, 1fr);
  }
  .widget       { grid-column: span 3; }
  .widget--wide { grid-column: span 6; }
}

@media (max-width: 640px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
  .widget,
  .widget--wide,
  .widget--full { grid-column: span 1; }
}

Частые ошибки

  • Фиксированные строки без minmax — grid-auto-rows: 120px обрезает контент; лучше minmax(120px, auto)
  • Нет адаптивности — дашборды особенно критичны на планшетах; планируйте брейкпоинты
  • 12 колонок всегда — для простого дашборда 3-4 колонки проще и понятнее, чем 12

Связанные темы

Ресурсы