什么是Grid侧边栏布局
Grid侧边栏布局是指页面分为左侧或右侧固定宽度的侧边栏区域，以及占据剩余空间的主体内容区域的布局方式，这种布局在后台管理系统、文档站点等场景中使用非常广泛。
传统的侧边栏布局实现多使用浮动或者Flex布局，需要处理元素排列、空间分配等多个细节，而CSS Grid布局天生适合处理二维的页面区域划分，实现这类布局会更加简洁直观。
基础的Grid侧边栏布局实现
最基础的Grid侧边栏布局只需要给容器设置display: grid，再通过grid-template-columns定义两列的列宽即可，第一列设置为固定宽度作为侧边栏，第二列设置为1fr占据剩余空间作为主体内容。
下面是基础实现的代码示例：
/* 容器基础样式 */
.container {
display: grid;
/* 第一列200px作为侧边栏，第二列1fr占据剩余空间 */
grid-template-columns: 200px 1fr;
min-height: 100vh;
}
/* 侧边栏样式 */
.sidebar {
background-color: #f5f5f5;
padding: 20px;
}
/* 主体内容样式 */
.main-content {
padding: 20px;
background-color: #ffffff;
}
对应的HTML结构如下：
<div class="container">
<div class="sidebar">侧边栏内容</div>
<div class="main-content">主体内容区域</div>
</div>
repeat函数的作用与优化方案
当侧边栏布局需要更多列的时候，比如左侧侧边栏、右侧辅助栏、中间主体内容的多列布局，如果直接写grid-template-columns: 200px 1fr 150px可读性会下降，重复定义相同列宽时也会产生冗余代码，这时候就可以使用repeat()函数简化配置。
repeat()函数的语法是repeat(重复次数, 列宽定义)，可以把重复的列宽定义合并为一段代码，让grid-template-columns的配置更简洁清晰。
多列侧边栏布局的repeat函数优化
比如需要实现左侧200px侧边栏，右侧150px辅助栏，中间主体内容的布局，常规写法如下：
.container {
display: grid;
grid-template-columns: 200px 1fr 150px;
min-height: 100vh;
}
如果使用repeat函数优化，当存在重复列宽定义时可以简化，比如需要两个固定100px的侧边栏加中间主体内容的场景：
.container {
display: grid;
/* 重复2次100px的列，然后1fr的主体列 */
grid-template-columns: repeat(2, 100px) 1fr;
min-height: 100vh;
}
响应式侧边栏布局的repeat函数应用
在响应式场景中，侧边栏可能会在小屏幕下隐藏，大屏幕下显示，结合媒体查询和repeat函数可以很方便地调整布局。比如大屏幕下显示侧边栏加主体，小屏幕下只显示主体：
/* 移动端默认样式，只显示主体 */
.container {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
}
.sidebar {
display: none;
background-color: #f5f5f5;
padding: 20px;
}
.main-content {
padding: 20px;
background-color: #ffffff;
}
/* 大屏幕下显示侧边栏加主体 */
@media (min-width: 768px) {
.container {
/* 使用repeat函数定义1次200px侧边栏，1次1fr主体 */
grid-template-columns: repeat(1, 200px) 1fr;
}
.sidebar {
display: block;
}
}
Grid侧边栏布局的常用配置技巧
除了基础的列宽定义，还可以结合Grid的其他属性优化侧边栏布局的体验：
- 使用
grid-gap或者gap属性设置侧边栏和主体内容之间的间距，避免手动设置margin导致布局计算复杂 - 侧边栏高度需要铺满屏幕时，给容器设置
min-height: 100vh即可，Grid会自动分配子元素高度 - 如果侧边栏内容过长需要滚动，给侧边栏设置
overflow-y: auto即可，不会影响主体内容区域
下面是带间距和滚动侧边栏的完整示例：
.container {
display: grid;
grid-template-columns: 200px 1fr;
/* 两列之间设置20px间距 */
gap: 20px;
min-height: 100vh;
}
.sidebar {
background-color: #f5f5f5;
padding: 20px;
/* 侧边栏内容过长时滚动 */
overflow-y: auto;
}
.main-content {
padding: 20px;
background-color: #ffffff;
}
常见注意事项
使用Grid实现侧边栏布局时需要注意几个问题：
Grid布局的兼容性：如果需要兼容IE浏览器，Grid布局无法使用，需要选择Flex或者其他布局方案。
fr单位的计算：fr是剩余空间分配单位，计算时会先扣除固定宽度的列，剩余空间再按比例分配。
repeat函数的参数：重复次数必须是正整数，列宽定义可以是任意合法的Grid列宽值，包括固定像素、fr、百分比等。
通过合理使用grid-template-columns和repeat()函数，可以快速实现各种复杂度的侧边栏布局，减少冗余代码，提升布局的可维护性。
CSS_Gridgrid_template_columnsrepeat函数侧边栏布局修改时间：2026-06-25 21:27:34