What determines the value of min-content?

Question

What is the min-content value of the first grid-item and why?

.grid-container {
  display: grid;
  grid-template-columns: min-content 1fr 1fr;
}

.grid-container > div:nth-child(1) {
  background-color: red;
}

.grid-container > div:nth-child(2) {
  background-color: orchid;
}

.grid-container > div:nth-child(3) {
  background-color: yellowgreen;
}

<div class="grid-container">
  <div style="width: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis commodi excepturi, labore accusamus voluptatum nemo, quo nisi debitis odit odio, placeat incidunt facilis rem doloribus. Pariatur repellat possimus ratione quod.
  </div>
  <div>I am column 2</div>
  <div>I am column 3</div>
</div>

Answer 1

The <flex> data type is specified as a <number> followed by the unit fr. The fr unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.

2FR equals 2 fractions. So the value of 1FR is 1 divided by the total number of fractions (2FR+1FR+1FR+1FR=5FR). So each 1FR=1/5th of the available space or 20%. So, 2FR is 2/5th or 40% wide.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value

https://alligator.io/css/css-grid-layout-fr-unit/

To directly answer your question, the first grid-columns min-content value is 1/2 of the remaining space after defining the first div with a fixed min-width of 150px. It is 1/2 because you have a total of 2fr and are setting to 1fr.