使用CSS Grid创建响应式侧边栏布局，通过grid-template-columns设置固定宽度侧边栏与弹性主内容区。1. 容器设为display: grid，定义grid-template-columns: 240px 1fr；2. 设置min-height: 100vh和gap间距；3. 在max-width: 768px媒体查询中改为1fr单列布局，可选order调整侧边栏位置；4. 推荐使用minmax(200px, 240px)替代auto以控制侧边栏宽范围，提升响应性；5. 结合JS可实现移动端抽屉效果。该方法简洁高效，适配多端。
使用CSS Grid创建侧边栏和内容区的响应式布局非常直观，关键在于合理设置 grid-template-columns 并结合媒体查询实现自适应。下面是一个实用且简洁的实现方式。
基本结构：定义网格容器
将页面最外层容器设为Grid布局，使用 grid-template-columns 划分侧边栏与主内容区域。设置为 auto 可让列宽根据内容自动调整，但更推荐使用 minmax() 或固定宽度+弹性增长来增强响应性。
- 侧边栏设为固定宽度（如 240px）
- 主内容区使用
1fr占据剩余空间
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 240px 1fr; /* 侧边栏 + 内容区 */
min-height: 100vh;
gap: 1rem;
}
响应式适配：小屏幕下调整布局
在移动设备上，通常希望侧边栏隐藏或变为顶部导航。通过媒体查询修改网格结构，使侧边栏不显示或堆叠到上方。
- 当屏幕宽度小于 768px 时，改为单列布局
- 可配合
transform实现抽屉式侧边栏（额外JS控制）
响应式代码：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* 单列显示 */
}
.sidebar {
order: -1; /* 可选：将侧边栏移到顶部 */
padding: 0.5rem;
}
}
使用 auto 的注意事项
若将 grid-template-columns 设为 auto 1fr，第一列宽度由内容决定，可能导致侧边栏过宽或过窄。
-
auto适合内容宽度稳定的场景 - 建议用
minmax(200px, 240px)限制侧边栏最小/最大宽度 - 主内容始终用
1fr确保灵活填充
更稳健的写法：
.container {
display: grid;
grid-template-columns: minmax(200px, 240px) 1fr;
gap: 1rem;
}
基本上就这些。Grid让两栏布局变得简单，搭配媒体查询即可实现良好响应性。关键是避免完全依赖 auto，而是结合具体设计需求设定合理范围。
