Question

我有一个响应网格：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px 10px;

如何在保持响应度的同时将最大列数设置为4？也就是说，在调整页面大小时，行应该折叠成一列，如示例中所示，但最大大小为四列。

所以，

repeat(4, 1fr);

无效。

我必须使用flexbox吗？我已经在SO上看到了相关的答案，但似乎没有人能够清楚地解释它。

工作示例here。

Answer 1

如何在保持时将最大列数设置为4 响应？

正如@ Powell_v2在评论中暗示的那样 - 当达到最大列数时，您需要设置媒体查询以修改grid-template-columns属性的值。

使用OP的示例，在窄视口宽度（我们的列数小于最大值）我们需要响应列 - 所以我们可以使用OP的grid-template-columns属性代码：

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))

但是，当我们达到最大列数时，我们希望网格停止响应 - 此时应该启用媒体查询来修改grid-template-columns的值。

我们可以计算这个断点 - 假设网格占据了整个视口 - 如下所示：

max number of cols * min column width + (max number of cols -1) * column gap

所以这里将是：400px + 30px = 430px

此时 - 我们不想要额外的列 - 我们只希望列的宽度相同。

@media (min-width: 430px) {
  .wpr {
    grid-template-columns: repeat(4, 1fr);
  }
}

所以解决方案看起来像这样：

body {
  margin: 0;
}
.wpr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  
  grid-gap: 10px 10px;
}
.wpr > div {
  border: 5px solid green;
  min-height: 50px;
}
@media (min-width: 430px) {
  .wpr {
    grid-template-columns: repeat(4, 1fr);
  }
}

<div class="wpr">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Codepen Demo（调整大小以查看效果）

NB：我们可以利用SASS等预处理器来实现更通用和可重用的解决方案：

// Set custom values for 1) Minimum Column width 2) Maximum # columns 3) Gap size

$min-col-width: 150;
$max-cols: 5;
$gap-size: 30;
$break-point: $min-col-width * $max-cols + $gap-size * ($max-cols - 1) * 1px;

Codepen Demo with SCSS（调整大小）

Answer 2

是不是你想限制网格的最大宽度，所以这些列是否适合这个？

如果列的最小尺寸为100px，则网格的最大宽度可以设置为430px（同时考虑边上的间隙）：

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px 10px;

  max-width: 430px;
`;

要适合全屏，您只需将最小值的限制提高到网格宽度/4。

CSS网格固定响应列

2 个答案:

Codepen Demo（调整大小以查看效果）

Codepen Demo with SCSS（调整大小）