Макет рабочего стола Dashboard отзывчив?

Мы еще не нашли адаптивный макет, который разрешил бы наши вопросы. Мы открыты для идей, но не так просто иметь одну и ту же панель управления, которая «работает» как на 10-дюймовом, так и на 27-дюймовом мониторе.

На данный момент у вас есть несколько вариантов в icCube:

• Создайте фиксированный макет (это один из вариантов, который мы предпочитаем)
• Создайте макет, который масштабируется с размером экрана
• Создайте отчет с несколькими макетами (это для планшетов, телефонов, печати). Пока нет для разных размеров экрана.

И действительно, вы можете создать набор различных отчетов.

_Надеюсь, поможет.

Простая компоновка сетки приборной панели

<div class = "grid-container">
  <header class = "header"></header>
  <aside class = "sidenav"></aside>
  <main class = "main"></main>
  <footer class = "footer"></footer>
</div>

Необходимо применить CSS

/* Simple dashboard grid CSS */

/* Assign grid instructions to our parent grid container */
.grid-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas:
    "sidenav header"
    "sidenav main"
    "sidenav footer";
  height: 100vh;
}

/* Give every child element its grid name */
.header {
  grid-area: header;
  background-color: #648ca6;
}

.sidenav {
  grid-area: sidenav;
  background-color: #394263;
}

.main {
  grid-area: main;
  background-color: #8fd4d9;
}

.footer {
  grid-area: footer;
  background-color: #648ca6;
}

Создайте стили и структуру для наших элементов верхнего и нижнего колонтитула; область сетки, объявленная ранее

<style>
  .header, .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: #648ca6;
  }
</style>

<header class = "header">
  <div class = "header__search">Search...</div>
  <div class = "header__avatar">Your face</div>
</header>

<footer class = "footer">
  <div class = "footer__copyright">&copy; 2019</div>
  <div class = "footer__signature">Sample</div>
</footer>