CSS Grid - 列的规则，必须尽可能窄，但最大宽度为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%的宽度，而最大值为auto，则确保当图片宽度小于50%时，文字将变大。

另一方面，图片上的auto最小值将确保它在小于50%时调整到适合图片的大小......而max-content的最大值则可以让文字栏一直延伸到超过50%，以满足图片的固有宽度。

你也可以使用 fit-content() 图像列，而不是 minmax(auto, max-content)但是，这相当于同样的事情（见 https:/developer.mozilla.orgen-USdocsWebCSSfit-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.net98gme470。

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