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 检索所有框 div 并获取数组长度：

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

Answer 2

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

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

可以在这里看到 Jen Simmons 示例页面：Spice Gallery Layout

不需要任何 javascript.. 但需要一些媒体查询.. 的解决方案是用容器包装您的 .wrapper div。并设置最大高度。每个屏幕断点时，最后一行都会有不均匀的图像。然后设置 .container overflow-y:hidden;

链接到这里的笔：用 css 隐藏网格的最后一行

使用 javascript 执行此操作时，您需要知道您拥有多少张图片，以及您的 minmax 列宽是多少。vw 单位基本上是以 % 为单位的宽度。所以你需要做一些数学运算。使用 mod 函数来知道最后一行有多少项目。然后需要一种方法来隐藏它们。