Hi, I’m learning CSS grid layout on mdn through the learning web development module. I’m confused about the statement repeat(auto-fill, minmax(200px, 1fr)) , for the repeat function, the auto-fill parameter determines the number of column or row and the minmax function’s result represents the track size.Both of them are unspecific value, so I wonder how the repeat function do to make them all specific at last.Here is the link https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids. Can anyone help me? 
Hello @Fgui_Zhang
take it step by step from right to left
- first minmax(200px,1fr)
a) mean at least it will be 200px
b) then the max will be 1fr that mean that at the end they will be equal size - now take the auto-fill part which will make as much column or row while keeping the minmax part valid
check the repeat() and minmax()
when you get confused about anything then use the developer tool of your browser then start playing with the value till you get the behavior also use the mdn to search of the tag/attribute you looking for it give good example to make you see it effect
hope that help and have a nice day 
Hi @justsomeone, thank you for comment.I’ve thought the question for a while, I came a different conclusion from you.I think the order of the function execution is probably like below:
1.first autofill
2.minmax(200px, 1fr)
The reason is 1fr is a proportion value which needs the specific number of columns to calculate.So the autofill maybe use the dichotomous algorithm to get a value first and cal the value of 1fr. Finaly verifies if it meets minmax.The function will terminate untill as many columns as will fit.At the same time , as much as width will get.
Hello @Fgui_Zhang
you very welcome i was not trying to tell you the execution order i was just trying to find a much easier way on how to interpret it
but if you want to know how it work then check https://drafts.csswg.org/css-grid/#repeat-notation and https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax
1 Like