利用grid-template-columns和repeat()函数可高效构建响应式侧边栏布局，通过设置固定宽度与fr单位划分区域，结合minmax()和媒体查询实现多设备适配，提升页面弹性与可维护性。
实现Grid侧边栏布局时，利用grid-template-columns和repeat()函数可以快速构建灵活、响应式的页面结构。核心思路是通过定义列的宽度比例，将容器划分为侧边栏和主内容区，并根据屏幕尺寸动态调整布局。
使用 grid-template-columns 定义侧边栏与主区域
通过grid-template-columns属性，可以明确划分网格的列宽。常见做法是为侧边栏设置固定宽度（如200px），主内容区使用1fr占据剩余空间。
.container {
display: grid;
grid-template-columns: 200px 1fr;
}
这样左侧为固定宽度侧边栏，右侧自动填充剩余宽度。若希望侧边栏更灵活，可使用minmax()限制最小最大值：
.container {
grid-template-columns: minmax(200px, 300px) 1fr;
}
结合 repeat() 函数优化多列布局
当需要创建多个等宽列（例如栅格系统或仪表盘布局），repeat()函数能大幅简化代码。比如创建一个三列等分布局：
立即学习“前端免费学习笔记（深入）”；
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
这等同于写1fr 1fr 1fr，但更简洁且易于维护。若某列需不同宽度，可用repeat()与其他值组合：
.layout {
grid-template-columns: 250px repeat(2, 1fr);
}
表示第一列为250px，后两列均分剩余空间，适用于“固定侧边栏 + 双栏主内容”场景。
响应式布局中的自适应技巧
在移动端或小屏设备中，可通过媒体查询重新定义grid-template-columns，实现列的堆叠或重排。
.container {
display: grid;
grid-template-columns: 200px 1fr;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
此时侧边栏与主内容垂直排列。也可使用auto-fit或auto-fill配合minmax()实现自动换行的栅格：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
浏览器会根据容器宽度自动计算每行可容纳的列数，每列最小200px，最大为1fr，适合卡片式布局。
基本上就这些。合理运用grid-template-columns和repeat()，能让Grid布局既简洁又强大，尤其在处理侧边栏与响应式结构时优势明显。不复杂但容易忽略的是对fr单位和minmax()的组合使用，这是提升布局弹性的关键。
