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

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，这会在最后一个断点处导致巨大的间隙，我希望能够检测到它而不是设置显式媒体查询。

Answer 1

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

返回值始终为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);

这是完整的 sn-p (Codepen)：

function getGridData () {
    // calc computed style
  const gridComputedStyle = window.getComputedStyle(grid);
  
  return {
    // get number of grid rows
    gridRowCount: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").length,
    // get number of grid columns
    gridColumnCount: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length,
    // get grid row sizes
    gridRowSizes: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").map(parseFloat),
    // get grid column sizes
    gridColumnSizes: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").map(parseFloat)
  }
}

window.addEventListener("DOMContentLoaded", outputGridData);
window.addEventListener("resize", outputGridData);

function outputGridData () {
  const gridData = getGridData();
  output.textContent = `
    Rows: ${gridData.gridRowCount}
    Columns: ${gridData.gridColumnCount}
    Rows sizes: ${gridData.gridRowSizes}
    Column sizes: ${gridData.gridColumnSizes}
  `;
}

#grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, 200px);
}


#output {
  white-space: pre-wrap;
}

.A, .B, .C {
  font-family: Arial;
  font-weight: 600;
  font-size: 2rem;
  border-radius: 50% 50%;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  box-shadow: -3px 5px 20px -3px #AAA;
  border: solid 10px #fff;
  color: #fff;
}

.A {
  background: #ffc300;
}

.B {
  background: #c70039;
}
.C {
  background: #581845;
}

<div id="output"></div>
<div id="grid">
 <div class="A">A</div>
 <div class="B">B</div>
 <div class="C">C</div>
 <div class="A">A</div>
 <div class="B">B</div>
 <div class="C">C</div>
  <div class="A">A</div>
 <div class="B">B</div>
 <div class="C">C</div>
 <div class="A">A</div>
 <div class="B">B</div>
 <div class="C">C</div>
</div>

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 在 Wc=610px 和 3 时等于 2 在 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() 来获取不同的值。在这种情况下，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;
}

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