Grid侧边栏折叠技巧与媒体查询应用

本文深入讲解了如何利用CSS Grid的`grid-template-columns`属性与媒体查询（media query）协同实现响应式、可交互的侧边栏折叠布局：默认状态下侧边栏宽250px，内容区自适应；在768px以下屏幕自动收缩为60px或完全隐藏，兼顾移动端体验；支持JavaScript手动切换折叠状态并添加平滑过渡动画；更推荐移动优先策略——先默认隐藏侧边栏，再随屏幕增大逐级展开（60px → 250px），显著提升小屏可用性与加载性能，整个方案简洁高效、无需依赖框架，是现代前端构建灵活导航界面的理想实践。

实现一个可折叠侧边栏的布局，使用 CSS Grid 和媒体查询（media query）是一种现代且高效的方式。通过 grid-template-columns 动态调整列宽，并结合 media query 响应不同屏幕尺寸，可以轻松完成侧边栏的展开与收起效果。

基本Grid布局结构

先构建一个简单的页面结构：

使用 CSS Grid 定义两列布局，左侧为侧边栏，右侧为主内容区。

默认状态下，侧边栏宽度设为 250px，内容区占据剩余空间：

通过Media Query响应屏幕变化

在小屏幕上（如移动端），我们希望侧边栏隐藏或变窄，主内容区占满全屏。利用 media query 可以动态修改 grid-template-columns 的值。

例如，在屏幕宽度小于 768px 时，将侧边栏折叠为 60px 或完全隐藏：

如果希望完全隐藏侧边栏，可设为 0px：

添加交互式折叠按钮

若需要用户手动控制侧边栏展开/收起，可通过 JavaScript 切换类名，配合 CSS 自定义属性或变量实现平滑过渡。

定义两个状态：

JavaScript 控制切换：

这样在任意屏幕下都能手动折叠，再结合 media query 可实现更智能的响应逻辑。

适配移动优先的设计建议

采用移动优先策略，先设置小屏样式，再用 min-width 扩展大屏表现：

这种写法更符合响应式设计趋势，确保小设备体验优先。

基本上就这些。通过灵活运用 grid-template-columns 和 media query，能高效实现侧边栏的折叠与响应式布局，无需复杂框架也能达到良好视觉与交互效果。

本篇关于《Grid侧边栏折叠技巧与媒体查询应用》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！