CSS网格行中的最小含量和最大含量有什么区别？

Question

虽然我可以看到column]的大小在min-content和max-content值之间存在差异，但是当文本以min-content中断并以max-content值尽可能伸展时，我没有连续看到这种效果。行大小用min-content或max-content定义，似乎没有任何效果。网格布局中的[[rows是否还有min-content和max-content的其他实际用途？

ul{
  list-style-type: none;
  width: 400px;
  height: 200px;
  padding: 0;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content max-content;
  box-shadow: 2px 2px 6px grey;
}

li:nth-child(1){
  background-color: #b9e2ff;
}

li:nth-child(2){
  background-color: #ffa733;
}

li:nth-child(3){
  background-color: #8b33ff;
}

li:nth-child(4){
  background-color: #ff3333;
}

<ul>
  <li>hello world hello world hello world hello world</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello world hello world hello world hello world</li>
</ul>

虽然我可以看到列大小的最小内容和最大内容之间存在差异，但当文本以最小内容中断并以最大内容值尽可能伸展时，我却没有...] >

Answer 1

您不会真正看到差异，因为在大多数情况下，宽度是首先根据文本定义的，然后将计算高度。

[如果您使用的是垂直文本而逻辑相反，则可能会有所不同：