先通过CSS Grid和媒体查询实现响应式侧边栏布局。默认使用grid-template-columns设置侧边栏宽250px，内容区占剩余空间；在屏幕小于768px时，用媒体查询将侧边栏缩至60px或隐藏；结合JavaScript切换类名实现手动折叠，支持平滑过渡；推荐移动优先，先隐藏侧边栏，再依屏幕增大逐步展开，提升小屏体验。
实现一个可折叠侧边栏的布局，使用 CSS Grid 和媒体查询（media query）是一种现代且高效的方式。通过 grid-template-columns 动态调整列宽，并结合 media query 响应不同屏幕尺寸，可以轻松完成侧边栏的展开与收起效果。
先构建一个简单的页面结构：
<div class="layout">使用 CSS Grid 定义两列布局，左侧为侧边栏，右侧为主内容区。
默认状态下，侧边栏宽度设为 250px，内容区占据剩余空间：
立即学习“前端免费学习笔记（深入）”；
.layout {在小屏幕上（如移动端），我们希望侧边栏隐藏或变窄，主内容区占满全屏。利用 media query 可以动态修改 grid-template-columns 的值。
例如，在屏幕宽度小于 768px 时，将侧边栏折叠为 60px 或完全隐藏：
@media (max-width: 768px) {如果希望完全隐藏侧边栏，可设为 0px：
@media (max-width: 768px) {若需要用户手动控制侧边栏展开/收起，可通过 JavaScript 切换类名，配合 CSS 自定义属性或变量实现平滑过渡。
定义两个状态：
.layout {.layout.collapsed {
grid-template-columns: 60px 1fr;
}
JavaScript 控制切换：
document.querySelector('.toggle-btn').addEventListener('click', function() {这样在任意屏幕下都能手动折叠，再结合 media query 可实现更智能的响应逻辑。
采用移动优先策略，先设置小屏样式，再用 min-width 扩展大屏表现：
.layout {@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，能高效实现侧边栏的折叠与响应式布局，无需复杂框架也能达到良好视觉与交互效果。
以上就是如何在CSS中实现Grid侧边栏折叠_Grid template-columns与media query实践的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
580
收藏
