用 Grid 实现一个完整的页面布局（Header/Sidebar/Main/Right/Footer）

.layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 200px 1fr 250px;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    right"
    "footer  footer  footer";
  gap: 1px;
  background: #e0e0e0; /* gap 颜色作为分割线 */
}

.header  { grid-area: header;  background: #fff; }
.sidebar { grid-area: sidebar; background: #fff; }
.main    { grid-area: main;    background: #fff; }
.right   { grid-area: right;   background: #fff; }
.footer  { grid-area: footer;  background: #fff; }

/* 平板：隐藏右侧栏 */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
  }
  .right { display: none; }
}

/* 手机：单列 */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .sidebar, .right { display: none; }
}

<div class="layout">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <aside class="right">Right Panel</aside>
  <footer class="footer">Footer</footer>
</div>