CSS Grid布局通过二维网格系统控制页面结构，其中grid-template-columns属性直接定义网格容器的列轨道。将三个轨道都设为1fr，即可让浏览器把容器内容区域按一等份划分，形成等宽三栏。fr全称fraction，代表剩余空间的比例分配单位，它只在容器有确定宽度时才计算实际像素值。
一、grid-template-columns与1fr的基础用法
在网格容器中声明display: grid后，grid-template-columns接收一系列长度值或比例单位。使用1fr 1fr 1fr意味着把可用宽度三等分。与百分比不同，fr会先扣除固定列和间距再分配，因此不会出现总宽超出100%导致的换行。
下面是一段最小可运行的三栏等宽示例。我们在外层包一个带有边框的容器，方便观察列边界。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.wrap {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
border: 1px solid #ccc;
padding: 12px;
}
.col { background: #eef; min-height: 80px; }
</style>
</head>
<body>
<div class="wrap">
<div class="col">左栏</div>
<div class="col">中栏</div>
<div class="col">右栏</div>
</div>
</body>
</html>
上述代码里，gap属性统一设置列与列之间的间隔，它不会计入fr的计算基础，因此三栏始终均匀。若把窗口从1200px拖到600px，每栏实际宽度会随容器缩小，但相互比例保持一比一比一。
需要注意，1fr不等同于width: 33.33%。当某一栏内部有不能压缩的内容（例如长英文单词）时，fr轨道会自动扩张到内容最小宽度，此时另外两栏会被挤压。这是fr与百分比在极端情况下的核心差异。
二、非等分三栏与中间内容区加宽
实际后台系统常要求左侧导航窄、中间内容宽、右侧信息窄。只需修改轨道定义为1fr 2fr 1fr，浏览器便把剩余空间分成四份，中栏占两份。这种写法比套多层flex直观很多。
以下示例演示了带侧边栏特征的三栏结构，并加入响应式收缩：屏幕小于768px时改为单列堆叠。
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 16px;
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}
在桌面端，假设容器宽1000px、gap共32px，剩余968px按1:2:1分配，得到左242px、中484px、右242px。中栏自然成为视觉重心，无需额外margin撑开。
如果希望左栏固定220px不伸缩，可混用固定值与fr：grid-template-columns: 220px 1fr 220px。此时fr只瓜分扣除440px后的空间，右侧左栏始终不变。这种混合定义在后台框架里非常常见。
三、与flex三栏方案的对比及易错点
传统flex实现三栏往往写left、main、right三个块，并给main设flex:1，但left和right需加flex-shrink:0防止被压。Grid则在一行声明中完成，结构更扁平。
| 维度 | Flex方案 | Grid加1fr方案 |
|---|---|---|
| 列定义位置 | 分散在子项 | 集中在容器 |
| 等高表现 | 默认拉伸等高 | 默认同行等高 |
| 间隙控制 | 多用margin | 统一gap |
使用Grid时一个典型误区是忘记容器宽度来源。若父级没设宽且本身不是块级撑满，grid可能只剩内容宽度，fr计算基础趋近于零，三栏会缩成最小内容宽。应确保包裹层有确定宽度或来自正常文档流。
另一个坑是嵌套grid。若在网格项里再写display:grid却不指列数，内部元素会堆成一列。子网格应显式重声明grid-template-columns，或改用subgrid继承父轨。
四、完整页面模板示例
下面给出一个可直接保存运行的完整页面，包含头部、三栏主体与底部，展示grid-template-columns 1fr组合在真实排版里的位置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Grid三栏</title>
<style>
body { margin: 0; font-family: sans-serif; }
header, footer { background: #333; color: #fff; padding: 12px; }
.main {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
gap: 16px;
padding: 16px;
}
.main > div { background: #f3f3f3; min-height: 200px; padding: 10px; }
</style>
</head>
<body>
<header>站点头部</header>
<div class="main">
<div>左导航</div>
<div>中间文章区，使用3fr获得更多空间</div>
<div>右广告</div>
</div>
<footer>页脚信息</footer>
</body>
</html>
该模板中，中间栏占三倍空间，两侧均分剩余。头部与页脚不参与网格，仅做常规块。这样既享受grid对主区的精确切分，又保留简单区域的线性流动。
当内容动态加载导致中栏极高时，由于grid同行等高特性，左右栏背景也会自动延伸，不必写js同步高度。这也是很多后台模板放弃float转投grid的原因。
CSS_Gridgrid-template-columns三栏布局修改时间：2026-08-11 12:00:20