先通过CSS Grid和媒体查询实现响应式侧边栏布局。默认使用grid-template-columns设置侧边栏宽250px，内容区占剩余空间；在屏幕小于768px时，用媒体查询将侧边栏缩至60px或隐藏；结合JavaScript切换类名实现手动折叠，支持平滑过渡；推荐移动优先，先隐藏侧边栏，再依屏幕增大逐步展开，提升小屏体验。
实现一个可折叠侧边栏的布局，使用 CSS Grid 和媒体查询（media query）是一种现代且高效的方式。通过 grid-template-columns 动态调整列宽，并结合 media query 响应不同屏幕尺寸，可以轻松完成侧边栏的展开与收起效果。
基本Grid布局结构
先构建一个简单的页面结构：
<div class="layout"><aside class="sidebar">侧边栏</aside>
<main class="content">内容区</main>
</div>
使用 CSS Grid 定义两列布局，左侧为侧边栏，右侧为主内容区。
默认状态下，侧边栏宽度设为 250px，内容区占据剩余空间：
立即学习“前端免费学习笔记（深入）”；
.layout {display: grid;
grid-template-columns: 250px 1fr;
height: 100vh;
}
通过Media Query响应屏幕变化
在小屏幕上（如移动端），我们希望侧边栏隐藏或变窄，主内容区占满全屏。利用 media query 可以动态修改 grid-template-columns 的值。
例如，在屏幕宽度小于 768px 时，将侧边栏折叠为 60px 或完全隐藏：
@media (max-width: 768px) {.layout {
grid-template-columns: 60px 1fr;
}
}
如果希望完全隐藏侧边栏，可设为 0px：
.layout {
grid-template-columns: 0 1fr;
}
.sidebar {
display: none;
}
}
添加交互式折叠按钮
若需要用户手动控制侧边栏展开/收起，可通过 JavaScript 切换类名，配合 CSS 自定义属性或变量实现平滑过渡。
定义两个状态：
.layout {display: grid;
grid-template-columns: 250px 1fr;
transition: grid-template-columns 0.3s ease;
}
.layout.collapsed {
grid-template-columns: 60px 1fr;
}
JavaScript 控制切换：
document.querySelector('.toggle-btn').addEventListener('click', function() {document.querySelector('.layout').classList.toggle('collapsed');
});
这样在任意屏幕下都能手动折叠，再结合 media query 可实现更智能的响应逻辑。
适配移动优先的设计建议
采用移动优先策略，先设置小屏样式，再用 min-width 扩展大屏表现：
.layout {display: grid;
grid-template-columns: 0 1fr; /* 移动端默认隐藏 */
overflow: hidden;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 60px 1fr;
}
.sidebar { display: block; }
}
@media (min-width: 1024px) {
.layout {
grid-template-columns: 250px 1fr;
}
}
这种写法更符合响应式设计趋势，确保小设备体验优先。
基本上就这些。通过灵活运用 grid-template-columns 和 media query，能高效实现侧边栏的折叠与响应式布局，无需复杂框架也能达到良好视觉与交互效果。
