1fr takes full available width. 100px takes exactly 100px and if there is another fr; in this case, 2fr then the available space is distributed as 1 of 3 parts of available space for 1fr and 2 of 3 parts of the available space for 2fr. For example, if the width of the grid container is 500px then the available space will be (500px-100px)=400px; 1fr will take 133px; and 2fr will take 266px.
HI @akr no! 1fr specifies 1 fraction of the container. You have specified that there are 3 columns. The first will take up 1 fraction of the available container width dependent upon how much space the other two columns take up. The second column is a fixed width of 100px and will never change width irrespective of how wide the container is. The third column is specified as 2 fractions of the available container width and thus, will always be twice as wide as the first column. The first and third columns will change widths relative to the container width. Try altering the size off the browser window to see this. Changing the font size to 1em will show that the min column width is actually the font size beyond which they can shrink no more!