使用CSS Grid布局时，通过grid-template-columns属性可轻松实现侧边栏与内容区的比例分配。例如设置为“200px 1fr”时，侧边栏固定为200像素，内容区占据剩余空间；若设为“1fr 3fr”，则按1:3比例分配容器宽度，适合响应式设计。还可混合使用px、fr等单位，如“250px 1fr”保持侧边栏固定宽度，主内容区自适应伸展。配合gap属性添加列间间距，如gap: 20px，提升布局美观性与可读性。掌握这些单位组合即可灵活构建各类两列布局结构。
使用CSS Grid实现侧边栏与内容区的比例布局非常直观，关键在于grid-template-columns属性的灵活运用。通过它，可以轻松定义列宽的比例关系，比如让侧边栏固定宽度，主内容区自适应，或按比例分配空间。
要创建一个包含侧边栏和主内容区的两列布局，先设置容器为Grid：
.container {
display: grid;
grid-template-columns: 200px 1fr;
}
这里，200px表示侧边栏宽度固定为200像素，1fr表示主内容区占据剩余所有空间。“fr”是网格特有的单位，代表可用空间的一部分。
如果希望侧边栏和内容区按比例分配，比如1:3，可以这样写：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
此时，整个容器被分为4份，侧边栏占1份，内容区占3份。这种写法适合响应式设计，能随容器大小自动调整。
实际开发中，常需要侧边栏固定、内容区弹性。例如：
.container {
display: grid;
grid-template-columns: 250px 1fr;
}
侧边栏保持250px不变，右边区域填满剩余宽度。也可以反过来，让内容区固定，侧边栏自适应：
grid-template-columns: 1fr 800px;
使用gap属性添加列之间的间隔，避免内容紧贴：
.container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px;
}
这样侧边栏与内容区之间会有20px的空白，提升可读性和视觉效果。
基本上就这些。掌握grid-template-columns的单位组合——像px、fr、%等——就能灵活控制侧边栏与内容区的布局比例，适应各种页面结构需求。不复杂但容易忽略细节，比如fr单位只分配剩余空间，已用空间会被扣除。
以上就是如何在CSS中使用Grid实现侧边栏与内容区比例布局_grid-template-columns控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
133
收藏
