Html CSS网格-拉伸以填充剩余空间

我正在使用CSS网格创建一个简单的3列布局，如下所示

.container{
显示：网格；
网格模板柱：1fr 1fr 1fr；
}
.col1{
背景：红色；
文本对齐：居中；
}
.col2{
背景：黄色；
文本对齐：居中；
}
.col3{
文本对齐：居中；
背景：绿色；
}

第1栏
第3栏

将

网格模板列

更改为

1fr auto 1fr

-请参见下面的演示：

.container{
显示：网格；
网格模板列：1fr auto 1fr；
/*改变*/
}
.col1{
背景：红色；
文本对齐：居中；
}
.col2{
背景：黄色；
文本对齐：居中；
}
.col3{
文本对齐：居中；
背景：绿色；
}
img{
显示：块；/*删除图像下方的内联元素“空格”*/
}

第1栏
第3栏

现在，使用

auto

而不是

1fr

作为居中分区。

尝试下面的代码段

.container{
显示：网格；
网格模板列：1fr auto 1fr；
}
.col1{
背景：红色；
文本对齐：居中；
}
.col2{
背景：黄色；
文本对齐：居中；
}
.col3{
文本对齐：居中；
背景：绿色；
}

第1栏
第3栏

grid-template-columns:1fr auto 1fr;