Question

当前，使用grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

表现如下：如果一行中的项目数超出限制（基于最小值），则会创建新的行。如果项目少于行所能容纳的数量，则项目将扩展以填充剩余空间。

但是，如果您不希望它们填充空间却具有最大尺寸，该怎么办？设置项目的最大宽度排序可以解决此问题，但随后将项目分散到整个容器中。我希望不填充空间，也不希望在容器上隔开空间，我希望这些项目具有最大大小，并且如果网格大于项目总数，则可以并排放置。

这种行为可能吗？

显示表格>总项目的代码段

html {
  font-size: 62.5%;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-template-rows: repeat(2, 20rem);
  grid-gap: 1rem;
  
  border: 1px solid lightgrey;
  padding: 1rem;
}

.item {
  background: lightblue;
  // max-width: 35rem;  
}

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

Answer 1

您应该使用auto-fill而不是auto-fit。区别在于auto-fill用尽可能多的列填充行，而auto-fit扩展列以使其适合可用空间。

我用解决方案创建了这个jsfiddle。

grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));

minmax行为，灵活的CSS网格

1 个答案: