使用 grid-template-columns 设置百分比或混合单位可创建响应式侧边栏，如 25% / 75% 分布；通过媒体查询在小屏幕（max-width: 768px）下切换为单列并隐藏侧边栏；结合 200px 1fr 或 minmax(300px, 1fr) 实现弹性布局，适配不同设备，提升用户体验。
在CSS Grid中制作响应式侧边栏，关键是利用 grid-template-columns 通过百分比灵活分配主内容区和侧边栏的宽度。这种方式简洁高效，适配不同屏幕尺寸。
先定义一个容器使用Grid布局，将页面分为侧边栏和主区域两列：
.container {这里左侧侧边栏占25%，右侧主内容占75%。整个容器高度占满视口。
使用媒体查询在小屏幕上调整列宽，提升移动设备体验：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {当屏幕小于768px时，改为单列布局，侧边栏可隐藏或折叠，主内容占满全屏。
结合固定宽度与弹性比例，实现更实用的响应效果：
.container {侧边栏固定200px，主内容自动填充剩余空间。适合工具类应用。也可用 minmax() 防止压缩：
grid-template-columns: 200px minmax(300px, 1fr);若需多侧边栏或动态调整，可用重复和比例控制：
grid-template-columns: 15% 1fr 15%;配合 grid-column 控制元素跨列，增强布局自由度。
基本上就这些。用百分比控制 grid-template-columns 是实现响应式侧边栏最直接的方式，结合媒体查询能轻松覆盖多种设备场景。不复杂但容易忽略细节，比如最小宽度和折叠策略。
以上就是如何在CSS中使用Grid制作响应式侧边栏_grid-template-columns百分比控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
642
收藏
