javascript - CSS网格-计算列数(javascript)

我有一个CSS网格

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 12.5vw );
  grid-template-rows: repeat(auto-fill, 12.5vw );
  background-color: black;
  grid-auto-flow: row dense;
  color: #444;
}


<div class="wrapper">
 <div class="box wide tall a">
 </div>
 <div class="box b">
 </div>
 <div class="box c">
 </div>
 <div class="box c">
 </div>
 <div class="box d">
 </div>
 <div class="box e">
 </div>
 <div class="box f">
 </div>
 <div class="box g">
 </div>
 <div class="box h">
 </div>
</div>

我想知道我的JavaScript代码中的列数。可能吗？

编辑：我想要这的原因是，如果少于足够数量的项目，使它成为一个正方形，我希望这些额外的项目根本不显示。

非常感谢！

最佳答案

您可以使用getElementsByClassName检索所有box div并获取数组长度：

var columns = document.getElementsByClassName('box').length