我如何設置css-grid使我有兩列，第一列自動決定它的寬度，但不超過容器寬度的50%?

例如，當第一列的內容少于網格的50%時，第一列應該是這樣的 小元素的行為

這就是當內容試圖占據超過50%的網格時該列的行為 大元素的行為

您可以使用CSS grid中的min-max函數來指示瀏覽器盡可能小地呈現左側，直到內容大小，即minmax(0，auto)。并且，可以使用右側的min-max函數，指示瀏覽器渲染右側不小于50%，但是通過指定1fr為最大值，即minmax(50%，1fr)，來占用剩余空間。

.container {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(50%, 1fr);
  margin-bottom: 20px;
}

.item {
  border: 1px solid black;
  padding: 5px
}

<div class="container">
  <div class=" item">
    Not much content
  </div>
  <div class=" item">
    right side content
  </div>
</div>
<hr/>  
<div class="container">
  <div class=" item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class=" item">
    right side content
  </div>
<div>