Встречается на собеседованиях • сегодня

Умеешь ли писать dashboard на grid

Да, умею. Grid Layout — мощный инструмент для создания сложных адаптивных интерфейсов, включая дашборды.

Пример простого дашборда:

css
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr;
  gap: 16px;
  height: 100vh;
}

.header { grid-column: 1 / -1; }
.widget-1 { grid-area: 2 / 1; }
.widget-2 { grid-area: 2 / 2; }
.widget-3 { grid-area: 2 / 3; }
.chart { grid-column: 1 / 3; grid-row: 3; }
.sidebar { grid-column: 3; grid-row: 3; }

text

**Плюсы:**  
- Чёткое управление позиционированием через `grid-area`, `grid-column/row`.  
- Гибкость: легко менять структуру под разные разрешения через медиазапросы.  
- Минимум лишнего HTML — вся вёрстка в CSS.  

Для сложных дашбордов комбинирую Grid с Flexbox (например, внутри виджетов).
Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы