Question

在这个简单的示例中可以看到，每个网格单元始终使用最大可能的空间量。为什么会发生这种情况？如果可能，我如何说服网格使用更少的空间？

.testgrid {
  display: grid;
  grid-template-columns: 20% minmax(20%, 80%);
  grid-auto-rows: minmax(1.5em, 4.5em);
}

.testgrid .item {
  background-color: #AF6;
  margin: 1px;
  overflow: hidden;
}

<div class="testgrid">
  <div class="item">Cell 1</div>
  <div class="item">Cell 2</div>
  <div class="item">Cell 3 (uses too much space, so really it ought to be clipped)</div>
  <div class="item">Cell 4</div>
  <div class="item">Cell 5</div>
  <div class="item">Cell 6 (more text here, could push the column wider)</div>
</div>

Answer 1

这是css3函数，取决于您的元素大小和屏幕大小。

Answer 2

当您不不使用main时，css网格可以使用对内容敏感的大小调整，但是显然，一旦添加pthread_join，网格就会忽略内容并进行分割在不同的单元格之间平均分配空间。 void *function(void *) { wait(lock[n]); // Do work... unlock(lock[n + 1]); }也更愿意浪费空间；如果容器受到限制（例如，受固定的minmax或minmax约束，它将仅使用少于最大值的容器）。

因此，如果要调整内容大小，请避免使用minmax。实际上，似乎仅对height支持对内容敏感的大小调整（并且不可以，您无法编写类似width的东西来更自由地分配可用空间。）

使用minmax作为行高，并将最小值和最大值设置为 items 的属性可以实现具有最小和最大行高的预期效果：

auto

calc(auto+2fr)

我找不到一种小于最大列宽的简单方法（这很奇怪，因为HTML表默认情况下是这种方式，因此，如果CSS网格系统（理想情况下会使表布局过时）令人惊讶，不提供此功能。）auto（或.testgrid { display: grid; grid-template-columns: 20% auto 1fr; grid-auto-rows: auto; max-width: 600px; } .testgrid .item { background-color: #AF6; margin: 1px; overflow: hidden; min-height: 1.5em; max-height: 4.5em; }中的<div class="testgrid"> <div class="item">Cell 1</div> <div class="item">Cell 2</div> <div></div> <div class="item">Cell 3 (uses too much space, so really it ought to be clipped)</div> <div class="item">Cell 4</div> <div></div> <div class="item">Cell 5</div> <div class="item">Cell 6 (more text here, could push the column wider)</div> <div></div> </div>）会导致单个单元格彼此独立缩小，但是如果您希望所有单元格都在其中，那是不希望的。列具有相同的宽度。

作为一种解决方法，我添加了一个虚拟的第三列以占用未使用的空间。不幸的是，这不只是CSS。 HTML必须知道哑列。为了使其正常工作，虚拟列需要使用justify-items: start单位，而所有其他列必须为固定宽度或justify-self: start。

Answer 3

我认为您需要max-content，这应该可以工作：

.testgrid {
  display: grid;
  grid-template-columns: 20% minmax(20%, max-content);
  grid-auto-rows: minmax(1.5em, 4.5em);
}

为什么`maxmax`总是使用最大空间？

3 个答案: