CSS 网格固定响应列答案

【问题标题】：CSS grid fixed responsive columnsCSS 网格固定响应列
【发布时间】：2018-10-17 02:32:43
【问题描述】：

我有一个响应式网格：

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

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

所以，

repeat(4, 1fr);

不会工作。

我必须使用 flexbox 吗？我在 SO 上看到过相关答案，但似乎没有一个能清楚地解释它。

工作示例here。

【问题讨论】：

而不是自动适应使用 4
@TemaniAfif 如果我这样做，我会失去响应能力。
Colin，响应性对您意味着什么？因为当您执行auto-fit -> 4 时，在调整大小期间，列会正确更改大小。但他们总是排成一列。
响应式就像示例代码一样。即调整页面大小折叠成一列。
你研究过媒体查询吗？

标签： css css-grid

【解决方案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。

【讨论】：

【解决方案2】：

如何将最大列数设置为四，同时保持响应能力？

正如 cmets 中 @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;

Codepen Demo with SCSS（调整大小）

【讨论】：