CSSGrid三栏布局全攻略

珍惜时间，勤奋学习！今天给大家带来《CSS Grid三栏布局技巧详解》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

使用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 的强大之处就在于这种简洁而精确的布局能力。

本篇关于《CSSGrid三栏布局全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！