css - 如何折叠 CSS 网格的宽度以使其在网格容器中居中

Question

是否可以将具有自动填充列的 CSS 网格的宽度折叠到具有相对于网格容器居中的等宽列所需的最小宽度？

IE 如果我有这样定义的网格:

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

并且网格容器是 800 像素宽，有没有办法确保网格本身只有 600 像素宽而不是 800 像素？

因为我不确定如何正确解释它，所以我做了一个 fiddle :https://jsfiddle.net/mhozx4ns/10/

我正在寻找一种方法，如果顶部容器的宽度超过将所有子项排成一排所需的宽度，它就可以像底部容器一样工作。

body {
  width: 800px;
  background: black;
}

.grid div {
  height: 50px;
  background: #ededed;
}

.css {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  background: red;
}

.manual {
  width: 664px;
  margin: 32px auto 0;
  background: blue;
}

.manual:after {
  content: '';
  display: table;
  width: 100%;
}

.manual.grid div {
  width: 300px;
  float: left;
  margin-bottom: 64px;
}

.manual.grid div:nth-of-type(even) {
  margin-left: 64px;
}

.manual.grid div:last-child {
  margin-bottom: 0;
}


}

<div class="css grid">
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
</div>

<div class="manual grid">
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
</div>

Answer 1

当您在规则中说 minmax(300px, 1fr) 时，您是在说:

Each column must be a minimum width of 300px and a maximum width of 1fr.

fr 单元占用网格容器中的可用空间。因此，如果您的容器宽度为 800 像素，则 fr 将考虑所有空间。

此外，由于 fr 占用了所有可用空间，因此通过分配可用空间发挥作用的 justify-content 变得毫无用处。

为什么不直接删除 1fr？

body {
  width: 800px;
  background: black;
}

.css {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-auto-rows: 50px;
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  background: red;
}

.grid div {
  background: #ededed;
}

<div class="css grid">
  <div></div>
  <div></div>
  <div></div>
</div>