如何在JavaScript中获取CSS动态网格的实际列数？

当然可以不用手动重新计算，直接通过浏览器的计算样式获取实际列数，步骤如下：

1. 获取网格容器的DOM元素
2. 使用getComputedStyle()获取容器的计算后样式
3. 解析gridTemplateColumns属性值——该值会以空格分隔的形式列出每一列的宽度定义，分割后的数组长度就是实际列数

示例代码：

// 替换成你的网格容器选择器
const gridEl = document.querySelector('.grid-container');
const computedStyle = getComputedStyle(gridEl);
// 按空格分割并过滤可能的空字符串（避免格式问题）
const columnCount = computedStyle.gridTemplateColumns.split(/\s+/).filter(col => col).length;
console.log('实际列数:', columnCount);

这个方法完全依赖浏览器已计算好的结果，不需要你根据容器宽度、最小列宽重复计算，能准确反映当前布局下的实际列数——无论是容器宽度变化导致列数增减，还是响应式布局切换，都能拿到正确数值。

需要注意：当容器宽度小于min(230px, 100%)时，gridTemplateColumns会解析为单个值，此时列数为1，符合你的CSS定义预期。

内容的提问来源于stack exchange，提问作者Simon Ferndriger