当项目大小不同时，自动填充和 minmax() 不起作用

Question

我正在尝试用不同大小的项目制作一个完全响应的网格。

This example 可以正常使用

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ; 

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
</div>

所有项目都具有相同的尺寸，并且在最小的屏幕尺寸上它们彼此叠放。

现在，如果您尝试对this example 进行相同操作，则已离开显式网格并必须再次移动的项目不会这样做，而是会缩小到指定的 minmax 值以下。所以在最小的屏幕尺寸上有些项目是看不到的。

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

除了添加媒体查询之外，有没有办法让示例 2 的行为类似于示例 1？

Answer 1

你写的答案有一个很大的提示：

现在，如果您尝试对本示例进行相同操作，则已离开显式网格且必须再次移动的项目不会这样做，而是在指定的 minmax 值以下缩小。 p>

"...离开显式网格的项目..."

这就是为什么您的网格项目缩小到低于grid-template-columns 中设置的minmax 最小值的原因。

一旦你不在显式网格中，你就在隐式网格中，grid-template-columns 属性无效。

显式网格由three properties定义：

• grid-template-columns
• grid-template-rows
• grid-template-areas

隐式网格中的轨道忽略这些属性。相反，它们使用grid-auto-rows 和grid-auto-columns 调整大小。

grid-auto-columns 的默认值为auto，这就是为什么您的网格项目在退出显式网格时会缩小到内容大小。

试试这个：

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    grid-auto-columns: minmax(200px, 1fr); /* NEW */
}

然后，在重新调整大小时，也可以选择添加到 make the grid fill empty cells：

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    grid-auto-columns: minmax(200px, 1fr); /* NEW */
    grid-auto-flow: dense; /* NEW */
}

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-columns: minmax(200px, 1fr);  /* NEW */
  grid-auto-flow: dense;   /* NEW */
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

revised codepen

Answer 2

最简单的答案是不，你不能。原因是当您结合auto-fill 和minmax(200px, 1fr) 时，您会告诉浏览器呈现您的代码以使用最小为200px 和最大为1fr 的列来制作网格。然后你告诉你的盒子跨越 2 或 3 列，这意味着它们在大屏幕上的最小宽度至少为 400 像素或 600 像素。在较小的屏幕上，跨度规则开始失去意义，但自动不会接管。它仍然需要考虑.a .b .c 等的个体宽度差异来计算各个列的宽度。

因此，很遗憾，您需要使用媒体查询或寻找其他类型的布局。