如何在CSS中使用Grid制作三栏布局_grid-template-columns 1fr组合使用

一分耕耘，一分收获！既然打开了这篇文章《如何在CSS中使用Grid制作三栏布局_grid-template-columns 1fr组合使用》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

使用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 吃掉剩余空间。

不等比弹性分布（如 1:2:1）

让三列按比例分配，比如中间更宽。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

此时总份数为 4fr，第一列为 1/4，第二列为 1/2，第三列为 1/4，形成“窄-宽-窄”结构。

结合 minmax 实现响应式三栏

在小屏幕上仍保持可用性，避免列太窄或太宽。

.container {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 2fr) 1fr;
  gap: 20px;
}

中间列最小为 300px，同时最多占两份弹性空间，兼顾内容需求与布局平衡。

基本上就这些。通过组合 1fr、固定值和 minmax()，你可以灵活控制三栏行为，适配多种设计需求。Grid 的强大之处就在于这种简洁而精确的布局能力。

今天关于《如何在CSS中使用Grid制作三栏布局_grid-template-columns 1fr组合使用》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！