使用CSS Grid布局结合fr单位和minmax函数，通过grid-template-columns设置固定或弹性列宽，并配合媒体查询实现不同屏幕下的自适应侧边栏布局，确保响应式效果简洁高效。
实现响应式网页侧边栏宽度自适应，关键在于使用现代CSS布局技术灵活分配空间。Grid布局中的 grid-template-columns 配合 fr单位 是一种简洁高效的方法，能根据容器自动调整主内容区与侧边栏的宽度比例。
使用 Grid 布局定义自适应列
通过 display: grid 将父容器设为网格布局，并用 grid-template-columns 设置列宽。fr（fraction）单位表示“可用空间的份数”，非常适合实现弹性分配。
例如：.container {
display: grid;
grid-template-columns: 250px 1fr; /* 固定宽度侧边栏 + 自适应主内容 */
}此时侧边栏固定为250px，主内容区域占据剩余所有空间。如果希望两侧都弹性伸缩：
.container {
display: grid;
grid-template-columns: 1fr 3fr; /* 侧边栏占1份，主内容占3份 */
}这样无论屏幕大小如何变化，两者始终按1:3比例分配容器宽度。
结合媒体查询实现响应式切换
在小屏幕上，可能需要隐藏侧边栏或改为整行显示。可通过媒体查询动态调整 grid-template-columns。
.container {
display: grid;
grid-template-columns: 1fr; /* 移动端堆叠显示 */
}
<p>@media (min-width: 768px) {
.container {
grid-template-columns: 200px 1fr; /<em> 平板及以上显示侧边栏 </em>/
}
}这种写法让布局随设备自然过渡，无需JavaScript干预。
支持最小宽度限制（minmax）
若想防止侧边栏过窄，可使用 minmax() 函数设定合理范围。
.container {
display: grid;
grid-template-columns: minmax(200px, 1fr) 3fr;
}这表示侧边栏最小200px，最大可扩展至1份弹性空间，配合主内容区保持视觉平衡。
基本上就这些。利用Grid的fr单位和模板列，搭配minmax和媒体查询，就能轻松实现既美观又实用的自适应侧边栏布局，无需复杂计算或JS控制。不复杂但容易忽略细节是断点设置和最小宽度保护。
