在CSS布局开发中，侧边栏宽度不固定是很多开发者会遇到的常见场景，比如侧边栏需要根据内容动态调整宽度，或者需要适配不同屏幕尺寸下的固定宽度需求，传统使用浮动、flex布局处理时往往需要写大量适配代码，还容易出现布局错位、内容溢出等问题。而CSS Grid作为专门处理二维布局的方案，提供了更直观的列宽定义能力，通过固定列宽和弹性单位的结合，可以轻松实现侧边栏宽度固定、主内容区自适应剩余空间的效果，布局稳定性远高于传统方案。
CSS Grid固定列宽的核心语法
CSS Grid中通过grid-template-columns属性定义网格的列宽，要实现侧边栏固定宽度、主内容区自适应，只需要结合固定长度单位和fr单位即可。fr是CSS Grid特有的弹性单位，代表网格容器中剩余可用空间的分配比例，1fr就表示占据1份剩余空间。
比如我们需要侧边栏固定240px，主内容区填充剩余空间，只需要这样定义容器样式：
/* 网格容器基础样式 */
.grid-container {
display: grid;
/* 第一列固定240px，第二列占据剩余所有空间 */
grid-template-columns: 240px 1fr;
gap: 16px; /* 列之间的间距 */
height: 100vh; /* 容器高度占满视口 */
}
/* 侧边栏样式 */
.sidebar {
background-color: #f5f5f5;
padding: 20px;
}
/* 主内容区样式 */
.main-content {
background-color: #ffffff;
padding: 20px;
}
对应的HTML结构如下：
<div class="grid-container">
<div class="sidebar">
<p>这是固定宽度的侧边栏</p>
<p>内容高度可以动态调整</p>
</div>
<div class="main-content">
<p>这是自适应宽度的主内容区</p>
<p>会自动填充侧边栏以外的所有剩余空间</p>
</div>
</div>
侧边栏宽度不固定的适配场景
如果侧边栏的宽度不是固定的240px，而是需要根据不同场景调整，比如小屏幕下侧边栏固定180px，大屏幕下固定300px，只需要结合媒体查询修改grid-template-columns的第一个值即可，不需要调整其他布局代码。
.grid-container {
display: grid;
/* 默认侧边栏180px */
grid-template-columns: 180px 1fr;
gap: 16px;
height: 100vh;
}
/* 屏幕宽度大于1200px时，侧边栏调整为300px */
@media (min-width: 1200px) {
.grid-container {
grid-template-columns: 300px 1fr;
}
}
如果侧边栏需要支持用户手动拖拽调整宽度，也可以在拖拽事件中动态修改grid-template-columns的第一个值，主内容区会自动适配剩余空间，不需要额外计算宽度，比flex布局的实现方式简单很多。
多列固定宽度的扩展用法
如果布局中不止一个侧边栏，比如左侧固定导航栏、右侧固定信息栏，中间是主内容区，同样可以用CSS Grid快速实现：
.multi-grid-container {
display: grid;
/* 左侧导航200px，右侧信息栏260px，中间主内容区自适应 */
grid-template-columns: 200px 1fr 260px;
gap: 16px;
height: 100vh;
}
.nav-sidebar {
background-color: #e8e8e8;
padding: 20px;
}
.main-area {
background-color: #ffffff;
padding: 20px;
}
.info-sidebar {
background-color: #f0f0f0;
padding: 20px;
}
这种多列布局如果用flex实现，需要分别设置各个子项的flex属性，还要处理空间分配的问题，而用CSS Grid只需要一行grid-template-columns定义就能完成，逻辑更清晰，维护性也更高。
和传统布局方案的对比
我们可以把CSS Grid方案和传统方案做个简单对比：
| 布局方案 | 侧边栏固定宽度实现难度 | 主内容区自适应逻辑 | 多列布局扩展性 |
|---|---|---|---|
| 浮动布局 | 高，需要计算宽度、处理清除浮动 | 需要手动设置margin避让 | 差，新增列需要调整大量样式 |
| Flex布局 | 中，需要设置侧边栏固定宽、主内容区flex:1 | 依赖flex属性分配空间 | 一般，多列时需要逐个设置flex属性 |
| CSS Grid布局 | 低，直接定义列宽即可 | 自动分配剩余空间 | 好，新增列只需修改grid-template-columns |
可以看出，在处理侧边栏宽度固定、主内容区自适应的场景时，CSS Grid的稳定性和开发效率都远高于传统方案，尤其是当布局需求变得复杂时，优势会更加明显。
注意事项
- 使用
grid-template-columns定义固定列宽时，固定值可以使用px、rem、em等任意CSS长度单位，根据实际需求选择即可。 - 如果容器宽度不足以放下所有固定列宽，网格会自动溢出，需要给容器设置
overflow: auto或者调整列宽适配小屏幕。 fr单位只会分配容器剩余的空间，不会压缩固定宽度的列，所以固定列的宽度一定会得到保证，这也是布局稳定的核心原因。
总的来说，用CSS Grid定义固定列宽来解决侧边栏宽度不固定的问题，是一种高效且稳定的方案，开发者只需要掌握grid-template-columns和fr单位的基本用法，就能应对绝大多数侧边栏布局场景，减少不必要的适配代码，提升开发效率。
CSS_Grid侧边栏布局固定列宽fr单位grid-template-columns修改时间：2026-06-08 21:57:36