使用 grid-template-columns 设置百分比或混合单位可创建响应式侧边栏，如 25% / 75% 分布；通过媒体查询在小屏幕（max-width: 768px）下切换为单列并隐藏侧边栏；结合 200px 1fr 或 minmax(300px, 1fr) 实现弹性布局，适配不同设备，提升用户体验。
在CSS Grid中制作响应式侧边栏，关键是利用 grid-template-columns 通过百分比灵活分配主内容区和侧边栏的宽度。这种方式简洁高效，适配不同屏幕尺寸。
基本布局结构
先定义一个容器使用Grid布局，将页面分为侧边栏和主区域两列：
.container {display: grid;
grid-template-columns: 25% 75%;
height: 100vh;
}
这里左侧侧边栏占25%，右侧主内容占75%。整个容器高度占满视口。
响应式断点调整
使用媒体查询在小屏幕上调整列宽，提升移动设备体验：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {.container {
grid-template-columns: 1fr;
}
sidebar { display: none; }
}
当屏幕小于768px时，改为单列布局，侧边栏可隐藏或折叠，主内容占满全屏。
更灵活的混合单位写法
结合固定宽度与弹性比例，实现更实用的响应效果：
.container {grid-template-columns: 200px 1fr;
}
侧边栏固定200px，主内容自动填充剩余空间。适合工具类应用。也可用 minmax() 防止压缩：
grid-template-columns: 200px minmax(300px, 1fr);自适应多栏布局（可选扩展）
若需多侧边栏或动态调整，可用重复和比例控制：
grid-template-columns: 15% 1fr 15%;/* 左侧边栏 + 主内容 + 右侧边栏 */
配合 grid-column 控制元素跨列，增强布局自由度。
基本上就这些。用百分比控制 grid-template-columns 是实现响应式侧边栏最直接的方式，结合媒体查询能轻松覆盖多种设备场景。不复杂但容易忽略细节，比如最小宽度和折叠策略。
