CSS网格最多4列

我试图根据项目的数量获得某种“动态”列

容器可以有1到4个项目。如果有1-3个项目，我希望列数为3；如果有4个项目，我希望列数为4

这就是我现在拥有的，如果有1-3个项目，它可以正常工作，但是如果有4个项目，那么最后一个项目将转到下一行。如果我有

网格模板列：重复（4，1fr）如果只有4个项目，则可以使用该选项

有没有可能通过CSS实现这一点

谢谢


.container{
显示：网格；
栅隙：10px；
网格模板列：重复（3，1fr）；
边框：1px实心#C1C1；
边界半径：5px；
填充物：5px；
}
.container>div{
高度：100px；
边框：1px实心#010101；
边界半径：5px；
}

不要使用显式列（使用
网格模板列定义），而是使用隐式列（网格根据需要自动创建）


.container{
显示：网格；
栅隙：10px；
网格模板柱：1fr 1fr 1fr；
网格自动列：1fr；
网格自动行：100px；
边框：1px实心#C1C1；
边界半径：5px；
填充物：5px；
}
.container>div{
网格行：1；/*保留第一行上的所有项目*/
边框：1px实心#010101；
边界半径：5px；
}




答案是最简单的方法，但如果您愿意，也可以使用javascript实现。如果需要，这可能会变得更复杂。。像这样：


const divs=document.queryselectoral（“.container div”）；
if（divs.length<4）document.documentElement.style.setProperty（“--gridCol”，3）
：根目录{
--gridCol:4；
}
.集装箱{
显示：网格；
栅隙：10px；
网格模板列：重复（var（--gridCol），1fr）；
边框：1px实心#C1C1；
边界半径：5px；
填充物：5px；
}
.container>div{
高度：100px；
边框：1px实心#010101；
边界半径：5px；
}

另一个想法：


.container{
显示：网格；
网格自动流：列；
网格自动列：0.33333fr；/*0.333=1/3*/
边框：1px实心#C1C1；
边界半径：5px；
}
.container>div{
高度：100px；
保证金：5px；
边框：1px实心#010101；
边界半径：5px；
}

< /代码>：D很棒，非常感谢：）你也可以考虑网格自动流：列而不是网格行：1相对于网格行的优势是什么？1？@ jvLogo没有优势。这是一种不同的方法same@JVLobo是的，家长谢谢你的回答：）不过，在这种情况下，我一直在寻找一种只使用CSS的方法。@JVLobo是的，我提到了@MichaelBenjamin answer是最简单的方法，我只是添加了它以供将来参考