如何用单份CSS Grid实现多页面布局切换（移除侧边栏）

绝对没问题！只用一份CSS文件就能搞定这个需求，核心思路是给不同页面的根元素（比如<body>）或者.grid-container本身添加独特的标识类，然后针对这些类编写不同的Grid布局规则即可。

具体实现步骤： #

1. 给不同页面添加区分类

首先，在你的两个HTML页面里，给<body>标签加上不同的类，用来标识页面类型：

• index.html（带侧边栏的页面）：

<body class="has-sidebar">
  <div class="grid-container">
    <div class="menu">导航菜单</div>
    <div class="mainWindow">主内容区</div>
    <div class="chat">聊天侧边栏</div>
    <div class="footer">页脚</div>
  </div>
</body>

• myOtherPage.html（不带侧边栏的页面）：

<body class="no-sidebar">
  <div class="grid-container">
    <div class="menu">导航菜单</div>
    <div class="mainWindow">主内容区</div>
    <div class="footer">页脚</div>
  </div>
</body>

2. 编写统一的CSS文件

在你的单份CSS文件里，先写通用的Grid容器样式，再针对不同页面类编写布局规则：

/* 所有页面共用的Grid基础样式 */
.grid-container {
  display: grid;
  grid-gap: 0.6em;
  column-gap: 1.2em;
}

/* 带侧边栏的页面布局（对应index.html） */
.has-sidebar .grid-container {
  grid-template-areas:
    'menu menu menu menu'
    'mainWindow mainWindow mainWindow chat'
    'footer footer footer footer';
}

/* 不带侧边栏的页面布局（对应myOtherPage.html） */
.no-sidebar .grid-container {
  grid-template-areas:
    'menu menu menu menu'
    'mainWindow mainWindow mainWindow mainWindow'
    'footer footer footer footer';
}

/* 必须给每个区域元素指定grid-area，否则模板不生效 */
.menu { grid-area: menu; }
.mainWindow { grid-area: mainWindow; }
.chat { grid-area: chat; }
.footer { grid-area: footer; }

额外小技巧： #

如果不想给<body>加类，也可以直接给.grid-container本身添加区分类，比如index.html里用<div class="grid-container has-sidebar">，myOtherPage.html里用<div class="grid-container no-sidebar">，对应的CSS规则就改成：

.grid-container.has-sidebar { /* 带侧边栏的布局 */ }
.grid-container.no-sidebar { /* 不带侧边栏的布局 */ }

效果完全一样，看你个人习惯选择哪种方式~

这种方案的优势是只用维护一份CSS文件，布局规则清晰，后续如果要加更多页面布局，只需要新增对应的类和Grid模板即可。

内容的提问来源于stack exchange，提问作者john denver