CSS网格 - 计算列数（javascript）答案

【问题标题】：CSS grid - count number of columns (javascript)CSS网格 - 计算列数（javascript）
【发布时间】：2019-06-03 10:07:39
【问题描述】：

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

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

非常感谢！

【问题讨论】：

您可以将类添加到列并使用document.querySelectorAll('.your_column_class').length
那么你想知道你有多少个 div 孩子？
重复：stackoverflow.com/a/55243400/8620333
谢谢，这是一个马赛克画廊，我想知道我的响应式网格中有多少列。如果项目的数量少于理想的正方形，那么我希望隐藏最后一行。

标签： javascript css vue.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

链接到这里：Hide last row of grid with css

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

【讨论】：