当我需要不同的宽度时，如何处理CSS网格中的动态列数？

我正在尝试创建一个CSS网格，如下所示：

| 50 pixels | auto | 100 pixels | 100 pixels | 100 pixels | 100 pixels | 50 pixels | 50 pixels

截图如下：

现在，我正在使用网格模板列定义列宽

但我不知道如何动态生成100像素的四列（屏幕截图中的红色）。这里可能只有一列，两列，三列或四列。如果少于四列，则具有“自动”宽度的列应占用额外的空间。

尝试此列：

.container{
显示：网格；
网格模板列：50px 1fr auto 50px 50px
}
.次网格{
显示：网格；
网格自动列：100px；
网格自动流：列；
}

50px
汽车
100px
100px
100px
50px
50px

试试这个基于flex的解决方案

.container{
显示器：flex；
高度：150像素；
宽度：100%；
}
.child-100、.child-50、.child-auto{
柔性生长：1；
边框：1px纯红；
}
.儿童100{
flex:0100px；
}
.child-50{
flex:050px；
}

50岁儿童
儿童汽车
儿童100
儿童100
儿童100
儿童100
50岁儿童
50岁儿童

我认为css网格无法完成这种布局。Flexbox在这里可能是一个更好的选择：。。。这就是您感兴趣的结果吗？感谢flex版本！实际上我最终使用了它，但由于问题是关于CSS网格的，我认为@Armin的答案是最正确的。