CSS网格-计算列数（javascript）

Question

我有一个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代码中的列数。 可能吗？

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

非常感谢！

Answer 1

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

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

Answer 2

我认为您错过了grid-template-columns:的minmax部分grid-template-columns:例如grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

如果没有它，您将始终有7列，并且网格列将不会响应，并且不会随着页面宽度的缩小/扩展而变化。

可以在此处查看Jen Simmons示例页面： Spice Gallery布局

一种不需要任何javascript ..但需要一些媒体查询的解决方案是用容器包装.wrapper div。 并设置最大高度。 每个屏幕的断点，当最后一行上的每个图像都没有偶数时。 然后设置.containeroverflow-y：hidden;

在此处链接到笔： 用CSS隐藏网格的最后一行

使用javascript进行此操作，您将需要知道有多少张图片以及minmax列的宽度是多少。 大众单位基本上是宽度（％）。 所以你需要做一些数学。 使用mod函数可以知道最后一行有多少个项目。 然后需要一种隐藏它们的方法。