CSS网格 - 列的规则必须尽可能狭窄，但最大宽度为50％。

Question

我有一个非常简单的网格，有两列。左侧列是一张图片，右侧列是一些文本。

我希望左侧列能够根据图片宽度调整（因此该列必须尽可能窄，只要图片合适即可）。但是我也希望这一列最多占网格宽度的50％。

我尝试了几种方法，例如：

display: grid;
grid-template-columns: minmax(auto, 50%) 1fr;

但这并不起作用：即使是小图片，左侧列也始终占据50%的宽度！那么，如果图片越小，如何让它占据更少的宽度呢？（请注意，图片的宽度为max-width: 100%）

- electrotype

---

这似乎更适合使用flexbox，通过在图像上使用max-width:50％和在文本上使用flex-grow:1。 - Temani Afif

Answer 1

你已经走在正确的路上，可以使用 minmax() 和 max-content 的组合。

将图片列设置为最小值为 auto，最大值为 max-content，同时将文本列设置为最小值为 50%，最大值为 auto。

grid-template-columns: minmax(auto, max-content) minmax(50%, auto);

文本列的最小宽度为50%，确保图片始终不会超过50%的宽度，而自动最大值则确保当图像宽度小于50%时，文本会变得更大。

另一方面，图像的最小宽度为自动调整大小以适应图像的尺寸，当宽度小于50%时...而最大值max-content允许文本列扩展到超出50%以满足图像的固有宽度。

您也可以在图像列中使用fit-content()而不是minmax(auto, max-content)，但这相当于相同的事情（请参见https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content）。

以下是代码示例：

#grid {
  display: grid;
  grid-template-columns: minmax(auto, max-content) minmax(50%, auto);

}
img {
  max-width: 100%;
}
.grid-item {
  border: 1px solid red;
}

<div id="grid">
  <img class="grid-item"src="https://via.placeholder.com/150" alt="">
  <p class="grid-item">Some Text</p>
</div>

为了测试，您可以调整占位符图像URL末尾的数字使其变大或变小。在这里是fiddle表单：https://jsfiddle.net/98gme470/

请注意，在IE中缺乏对max-content和fit-content()的支持：https://caniuse.com/#search=max-content

- pschueller

---

这个答案仅适用于两列的特殊情况。如果你有三列，并且外部两列需要使用最大宽度进行收缩包装，那么你就无法确定中间列的最小值是多少。 - 75th Trombone

@75thTrombone 我认为这取决于具体情况。例如，如果您的两个外部列相等，则 grid-template-columns: minmax(auto, max-content) minmax(33.33%, auto) minmax(auto, max-content); 可以很好地实现三个均匀列。 - pschueller