一种计数响应网格中的列的方法 [英] A way to count columns in a responsive grid

问题描述

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

Although I have not yet been able to find an answer, the question is simple: Is there a way, other than brute force, to count the number of columns in a responsive grid?

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

我问的原因是因为我给网格项目一个最大宽度会在最后一个断点处引起巨大的缺口，我希望能够检测到该缺口，而不是设置显式的媒体查询。

The reason I ask is because I have given the grid items a max-width that causes a massive gap at the very last breakpoint, which I would like to be able to detect instead of setting an explicit media query.

推荐答案

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

I think the easiest way without brute force is to consider a simple division. You can easily find the width of the container and each column is defined by minmax(300px,1fr) and we know the gap. Using all these information the calculation should be done like below:

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

If we will have N columns then we will have N-1 gaps. We also know that W should at least be 300px and cannot be more than a value (we will call Wmax).

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

Let's suppose the gap is equal to 10px.

如果 N = 2 并且每列等于 300px 我们将使容器宽度等于 300px * 2 + 10px * 1 = 610px 。

If N=2 and each column is equal to 300px we will have the container width equal to 300px*2 + 10px*1 = 610px.

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

If N=3 and each column is equal to 300px we will have 300px*3 + 10px*2=920px.

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

Now it's clear that if the container width is between 610px and 920px we will have 2 columns because there is no space to hold 3 columns but enough space to hold 2 columns that we expand to fill the remaining space (using 1fr) so Wmax in this case is (920px - 10px)/2 = 455px. In other words, the width will vary from 300px to 455px when having 2 columns.

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

So if we take the formula 300px*N + 10px*(N-1) = Wc with Wc our container width you will see that N is equal to 2 when Wc=610px and 3 when Wc=920px and between we will have a result in [2,3] so we simply round the value to the smallest one (2 in this case) and we will have our column number.

这是一个基本示例：

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 将为我们提供计算所得的宽度每列（实际上，由于四舍五入，我们仍然会有一些分数）。

In case you don't know the value of gap and min-width you can consider getComputedStyle() to get the different values. In this case, the N should already be an Integer because grid-template-columns will give us the computed width of each column (in practice, we will still have some fraction due to rounding ).

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>

这篇关于一种计数响应网格中的列的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！