How can I set range of css grid column size?

Question

How can I set the css-grid so that I have two columns, the first of which determines its width automatically, but not more than 50% of the container's width?

For example, this is how the first column should behave when its content is less than 50% of the grid Behavor of small element

And this is how the column behaves when the content tries to occupy more than 50% of the grid Behavor of large element

Answer 1

You can the min-max function within CSS grid to instruct the browser to render the left side as small as possible, down to the content size i.e., minmax(0, auto). And, you can use the min-max function on the right side to instruct the browser to render the right side no smaller than 50%, but to take up the remaining space by specifying 1fr as the maximum value, i.e., 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>