使用CSS Grid可通过grid-template-columns和1fr单位实现三栏布局。1. 基本三等分：1fr 1fr 1fr平均分配宽度；2. 固定-弹性-固定：200px 1fr 200px设置侧边栏固定、主区自适应；3. 不等比分布：1fr 2fr 1fr形成窄-宽-窄结构；4. 响应式布局：1fr minmax(300px, 2fr) 1fr确保中间列最小300px且弹性扩展。组合fr、固定值与minmax可灵活适配多种需求，展现Grid的精确布局能力。
使用CSS Grid制作三栏布局非常直观，关键在于合理利用 grid-template-columns 和 1fr 单位来分配列宽。下面介绍几种常见的三栏布局实现方式。
让三列平均分配容器宽度，每列占 1/3 宽度。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
padding: 20px;
}
这里三个 1fr 表示每列占据相等的可用空间，自动等分容器宽度。
常见于网页布局：左右侧边栏固定宽度，中间主区域自适应。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 16px;
}
第一列和第三列设为固定 200px，中间列使用 1fr 吃掉剩余空间。
让三列按比例分配，比如中间更宽。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
此时总份数为 4fr，第一列为 1/4，第二列为 1/2，第三列为 1/4，形成“窄-宽-窄”结构。
在小屏幕上仍保持可用性，避免列太窄或太宽。
.container {
display: grid;
grid-template-columns: 1fr minmax(300px, 2fr) 1fr;
gap: 20px;
}
中间列最小为 300px，同时最多占两份弹性空间，兼顾内容需求与布局平衡。
基本上就这些。通过组合 1fr、固定值和 minmax()，你可以灵活控制三栏行为，适配多种设计需求。Grid 的强大之处就在于这种简洁而精确的布局能力。
以上就是如何在CSS中使用Grid制作三栏布局_grid-template-columns 1fr组合使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
897
收藏
