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&nbsp;columns&nbsp;=&nbsp;document.getElementsByClassName('box').length

Answer 2

我认为你错过了grid-template-columns:&nbsp;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 函数来知道最后一行有多少项目。然后需要一种方法来隐藏它们。