Question

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

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

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

因此，不幸的是，您将需要使用媒体查询或查找其他类型的布局。

Answer 2

您所写的内容对答案有很大的提示：

现在，如果您在本示例中尝试相同的操作，则离开显式网格并必须再次移动的项目不会这样做，但会在指定的minmax值以下收缩。

“ ...离开显式网格的项目...”

这就是为什么网格项会缩小到minmax中设置的最低grid-template-columns之下的原因。

一旦您不在显式网格中，便会在隐式网格中，并且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

当商品尺寸不同时，自动填充和minmax（）无效

2 个答案: