css 网格根据页面更改布局

Question

所以我的主页有一个菜单、侧边栏和主窗口。我有一个重定向到另一个页面。在此页面上，我希望侧边栏消失。

这是否可以在没有 2 个 CSS 文件的情况下使用 CSS 网格？

例如，这将是 index.html 的网格

grid-container {
  display: grid;
  grid-template-areas:
  'menu menu menu menu'
  'mainWindow mainWindow mainWindow chat'
  'footer footer footer footer';
  grid-gap: 0.6em;
  column-gap: 1.2em;
}

重定向到 myOtherPage.html

.grid-container {
  display: grid;
  grid-template-areas:
  'menu menu menu menu '
  'mainWindow mainWindow mainWindow mainWindow '
  'footer footer footer footer';
   grid-gap: 0.6em;
   column-gap: 1.2em;
}

Answer 1

您可以这样构建您的 CSS。第一个 block 具有所有 .grid-container 共享的样式。无论 other-page 应该是什么，下一个都是唯一的。

.grid-container {
  display: grid;
  grid-template-areas:
  'menu menu menu menu'
  'mainWindow mainWindow mainWindow chat'
  'footer footer footer footer';
  grid-gap: 0.6em;
  column-gap: 1.2em;
}

.grid-container.other-page {
  grid-template-areas:
  'menu menu menu menu '
  'mainWindow mainWindow mainWindow mainWindow '
  'footer footer footer footer';
}

索引

<div class="grid-container">...</div>

其他页面

<div class="grid-container other-page">...</div>