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

Question

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

我想让左栏适应图片宽度(所以栏必须尽可能窄，只要图片适合)。但我也希望此列最多占网格宽度的 50%。

我尝试了一些事情，例如:

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

但这不起作用:左栏总是占 50%，即使图片很小!

那么，如果图片较小，我该如何告诉它占用较小的宽度呢？

(请注意图片的宽度为max-width: 100%)

Answer 1

你走对了，你可以结合使用 minmax() 和 max-content。

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

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

文本列的最小值 50% 将确保图片的宽度永远不会超过 50%，而自动的最大值可确保当图像宽度小于 50% 时文本会变大。

另一方面，图像上 auto 的最小值将确保它在小于 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