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。第一块具有所有.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>

CSS网格根据页面更改布局

1 个答案: