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

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;
}

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

Answer 1

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

返回的值总是转换为分隔的像素值（例如 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);

访问 Codepen 示例

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。换句话说，宽度将变化从300px到455px具有2列时。

因此，如果我们采用容器宽度的公式300px*N + 10px*(N-1) = Wc，Wc您将看到它N等于2何时Wc=610px和3何时Wc=920px以及我们将得到的结果[2,3]因此我们只需将值四舍五入到最小的值（在本例中为 2），我们将得到我们的列数字。

这是一个基本示例：

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>

如果您不知道 gap 和 min-width 的值，您可以考虑getComputedStyle()获取不同的值。在这种情况下， theN应该已经是一个 Integer 因为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;
}

<div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>