时间戳

首页 > 解决方案 > 将响应式网格限制为最多 2 列？

css - 将响应式网格限制为最多 2 列？

问题描述

我有一个两列布局，其中一列在网格上显示许多图像。图像的大小和数量各不相同。我希望图像显示一行或每行两个，具体取决于图像和屏幕的大小。我设置了以下网格：

@media (max-width: 2000px) {
  .productimg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 2fr));
  grid-gap: 5px;
  grid-auto-flow: row dense;
  }

图像被赋予一个类 .u-max-full-width 以保持它们包含在网格中：

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }

在大多数情况下，这是可行的。请参阅下面的理想布局：

在此处输入图像描述

但是，在某些屏幕宽度下，图像会分成三列。只要可以将三个 195 像素宽的图像放在同一行上，就会发生这种情况特别薄的图像。我认为可能是图像达到了它们的源宽度，然后而不是保持在那里缩小到 195 像素，但在达到最大尺寸之前它们正在向下移动到 195 像素。

例如，宽度分别为 336、353 和 390 的图像将切换为三列。当容器 div 只有 595px 宽时，对于 336px 和 353px 的图像来说足够小来填充它而不会强制第三个进入。

在此处输入图像描述

但是，如果我增加最小宽度，则可以解决问题，但是，图像将无法以较小的分辨率正确分成两行。我尝试对容器 div 可以容纳三个 195px 图像的范围使用 @media 声明，并声明绝对最大大小。

@media (min-width: 1542px) and (max-width: 2000px){ 
  .productimg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 350px));
  grid-gap: 5px;
  grid-auto-flow: row dense;
  }

这似乎确实阻止了三列的发展，但现在它在屏幕宽度上从 1541 到 1542px 之间的两列跳到一列，因为最大宽度被优先考虑，这根本不是我想要的。

在此处输入图像描述

我想要做的是将列保持在最多两列，但只要图像宽度不小于 195px，就完全填充行，但我似乎找不到任何简单的方法来做到这一点。我已经查看了网格的所有各种格式声明，但正在努力概念化它们的使用。我想知道网格是否甚至是在这种情况下使用的合适工具，但我还没有找到更好的解决方案。

对此问题的任何帮助将不胜感激。

标签： csscss-grid

解决方案

与视口单元结合使用max()以使列宽始终足够大，以便在大屏幕上始终具有固定数量的列（在您的情况下为 2）。

grid-template-columns: repeat(auto-fit, minmax(max(195px,Xvw), 2fr));

调整X直到你得到你想要的结果。

例子：

.box {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(max(195px, 45vw), 2fr));
  margin: 10px;
  grid-gap: 40px;
}

.box>* {
  height: 100px;
  background: red
}
<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

相关问题：没有媒体查询的CSS网格最大列数

推荐阅读