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: repeat(auto-fill, minmax(280px, 1fr));

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

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

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

指向笔的链接：Hide last row of grid with css

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

CSS网格-计算列数（javascript）

2 个答案: