javascript-根据元素数量更改网格布局

我有一个可以包含 1-5 个元素的包装器。

<div class="wrapper">

  <div class="element"></div>

</div>

我想根据它们的数量更改显示它们的布局：

1 个元素：1x1，33.3% 宽度

2 个元素：2x1，33.3% 宽度

3 个元素：3x1，33.3% 宽度

4 个元素：2x2，50% 宽度

5 个元素：3x2，33.3% 宽度

如果没有 JavaScript，我怎么能做到这一点？

这是Codepen供参考。