在 header 和页脚上具有多列的仪表板布局

Question

我正在为管理仪表板使用网格。我正在尝试的设计是 header 上有两列，左边是徽标，右边是菜单栏之类的东西。第二行是侧边栏和主栏 body。最后一行将是页脚，但在左侧应该有设置或注销按钮，这应该是固定的。我试过了，但我无法将 header 和页脚分成两列。

这就是我想要做的。我希望我想说的很清楚

.dashboard {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: auto 1fr;
      height: 100vh;
    }
    
    header {
     background: blue;
     grid-column: 1/-1;
     grid-row: 1;
    }
    
    aside {
      background-color: #00152b;
      grid-row:2/3;
      grid-column:1;
      width: 200px;
    }
    
    main {
      background: #acacd71c;
      grid-row: 2;
      grid-column: 2;
    }
    
    footer {
      grid-row: 4;
      grid-column:2;
    }
    
    .fixed-logout-btn {
      position: absolute;
      bottom: 0;
      background: blue;
      display: flex;
      width: 180px;
    }

<div class="dashboard">
  <header>
    <div class="left">
      logo
    </div>
    <div class="right">
      menu bar
    </div>
  </header>
  <aside>
    <p>aside</p>
    <div class="fixed-logout-btn">
      <p>logout</p>
    </div>
  </aside>
  <main>
    <p>main</p>
  </main>
  <footer>
    <p>copyright</p>
  </footer>
</div>

这是预期的

Answer 1

也许这对你有用。我认为您没有正确包含菜单栏 .right class.

.dashboard {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: auto 1fr;
      height: 100vh;
    }
    
    header {
     background: blue;
     grid-column: 1/-1;
     grid-row: 1;
    }
    
    aside {
      background-color: #00152b;
      color: grey;
      grid-row:2/3;
      grid-column:1;
      width: 200px;
    }
    
    main {
      background: #acacd71c;
      grid-row: 2;
      grid-column: 2;
    }
    
    footer {
      grid-row: 4;
      grid-column:2;
    }
    
    .fixed-logout-btn {
      position: absolute;
      bottom: 0;
      background: yellow;
      display: flex;
      width: 200px;
    }
    
    .right {
      grid-row: 1;
      grid-column: 2;
      background-color: red;
    }

<div class="dashboard">
  <header>
    <div class="left">
      logo
    </div>
  </header>
    <div class="right">
      menu bar
    </div>
  <aside>
    <p>aside</p>
    <div class="fixed-logout-btn">
      <p>logout</p>
    </div>
  </aside>
  <main>
    <p>main</p>
  </main>
  <footer>
    <p>copyright</p>
  </footer>
</div>

在 header 和页脚上具有多列的仪表板布局

dashboard layout with multiple column on header and footer

html

css

responsive-design