CSS 网格固定响应列

Question

我有一个响应式网格：

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

如何将最大列数设置为四，同时保持响应度？也就是说，当调整页面大小时，行应像示例中那样折叠成一列，但最大尺寸为四列。

所以，

repeat(4, 1fr);

将不起作用。

我必须使用 flexbox 吗？我在 SO 上看到了相关答案，但 none 似乎解释得很清楚。

工作示例here。

Answer 1

你是不是想限制网格的最大宽度，这样列就会根据它来调整？

如果列的最小尺寸为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 的网格宽度。

Answer 2

How can I set the max number of columns to be four, while maintaining responsivity?

正如评论中@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（调整大小看效果）

注意： 我们可以利用 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;

CSS 网格固定响应列

CSS grid fixed responsive columns

css

css-grid

Codepen Demo（调整大小看效果）

Codepen Demo with SCSS（调整大小）