一种计数响应网格中的列的方法

Question

尽管我还没有找到答案，但是问题很简单：有没有办法 除了蛮力 计算响应式网格中的列数？

#grid-container {
  width: 100%;
  height: 85%;
  position: relative;
  padding: var(--gap); /* adjusted with JS to make var(--gap) responsive */
  display: grid;
  grid-gap: var(--gap); /* adjusted with JS to make var(--gap) responsive */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  box-sizing: border-box;
  background: skyblue;
}

.grid-item {
  width: 100%;
  min-width: 120px;
  max-width: 450px;
  height: ; /* adjusted with JS on resize events to roughly maintain proportions */
  min-height: 192px;
  border-radius: 10px;
  background: #333;
}

我问的原因是因为我给网格项一个max-width，该网格项在最后一个断点处引起了巨大的间隙，我希望能够检测到该间隙，而不是设置显式的媒体查询。 / p>

Answer 1

获取css网格的行数/列数的一种方法是通过使用grid-template-rows的计算样式来使用grid-template-columns或window.getComputedStyle(grid)。

返回的值始终为transformed to separated pixel values（例如20px 20px 50px），其中每个值代表相应列/行的大小。剩下要做的就是将字符串分成一个数组并计算值的数量。

const gridComputedStyle = window.getComputedStyle(grid);

// get number of grid rows
const gridRowCount = gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").length;

// get number of grid columns
const gridColumnCount = gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length;

console.log(gridRowCount, gridColumnCount);

Visit Codepen example

Answer 2

我认为没有蛮力的最简单方法是考虑简单的划分。您可以轻松地找到容器的宽度，每列由minmax(300px,1fr)定义，我们知道gap。使用所有这些信息，计算应如下所示：

如果我们将有N列，那么我们将有N-1个空白。我们还知道W至少应为300px，并且不能超过一个值（我们将称为Wmax）。

让我们假设差距等于10px。

如果N=2并且每一列等于300px，则容器宽度等于300px*2 + 10px*1 = 610px。

如果N=3并且每一列等于300px，我们将有300px*3 + 10px*2=920px。

现在很明显，如果容器宽度在610px和920px之间，我们将有2列，因为没有空间可容纳3列，但有足够的空间可容纳2列，因此我们可以扩展以填充剩余空间（使用1fr），因此Wmax在此情况下为(920px - 10px)/2 = 455px。换句话说，宽度为2列时，宽度将从300px到455px。

因此，如果我们将公式300px*N + 10px*(N-1) = Wc与Wc一起用作容器宽度，则当N和{{1时，2等于Wc=610px }}，当3与之间时，我们将在Wc=920px中得到一个结果，因此我们只需将值四舍五入到最小的值（在这种情况下为2），就可以得到列号。

这是一个基本示例：

[2,3]

var gap = 10;
var minW = 200;

var Wc = document.querySelector('.grid').offsetWidth;
var N = Math.floor((Wc+gap)/(minW+gap));
console.log(N);


window.addEventListener('resize', function(event){
   Wc = document.querySelector('.grid').offsetWidth;
   N = Math.floor((Wc+gap)/(minW+gap));
   console.log(N);
});

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  grid-gap:10px;
}
span {
  min-height:50px;
  background:red;
}

如果您不知道间隔和最小宽度的值，可以考虑<div class="grid"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>来获取不同的值。在这种情况下，getComputedStyle()应该已经是一个整数，因为N将为我们提供每列的计算宽度（实际上，由于四舍五入，我们仍然会有一些分数）。

grid-template-columns

var grid = document.querySelector('.grid');

var gap = parseFloat(window.getComputedStyle(grid,null).getPropertyValue("column-gap"));
var minW = parseFloat(window.getComputedStyle(grid,null).getPropertyValue("grid-template-columns"));

var Wc = document.querySelector('.grid').offsetWidth;
var N = (Wc+gap)/(minW+gap);
console.log(N);


window.addEventListener('resize', function(event){
   Wc = document.querySelector('.grid').offsetWidth;minW = parseFloat(window.getComputedStyle(grid,null).getPropertyValue("grid-template-columns"))
   N = (Wc+gap)/(minW+gap);
   console.log(N);
});

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  grid-gap:10px;
}
span {
  min-height:50px;
  background:red;
}