For the following line of code:
grid-template-colums: auto 1fr;
I have found that there’s no difference in the layout of the grid when I delete auto. What does auto do?
auto should define the size of the objects within the columns/the size of each column. That is, if the object is at its maximum width, auto causes the columns to be referenced by the objects min-max properties.
From Mozilla:
auto
Is a keyword that is identical to maximal content if it’s a maximum. As a minimum it represents the largest minimum size (as specified bymin-width/min-height) of the grid items occupying the grid track.
Note:
autotrack sizes (and onlyautotrack sizes) can be stretched by thealign-contentandjustify-contentproperties.
1 Like
I’m sorry, I still don’t get it, what do you mean with " if the object is at its maximum width, auto causes the columns to be referenced by the objects min-max properties."?
For example: Let us say you have 3 images you are wanting to grid using grid-template-colums
The first image is 100px wide (naturally), the second is 200px, and the third is 300px wide.
Setting the first input to auto automatically sets a min-max property of the whole grid system. So, depending on what your other inputs are, they will be set based on this min-max relationship.
Ie. You have chosen 1fr to be the next input, this would probably mean that none of the images are going to be smaller than 100px wide, and larger than 300px wide, because that is the automatic min-max. However, remember that they will all still be the same size.
All in all, I do not think it will make a difference, if the enclosed content is all the same size.
1 Like
Ok, thank you! 
So, if it ultimately does the same thing as the minmax function, what’s the difference between auto and minmax?
Well, with auto you do not need to know the sizes, but with minmax you do. I suppose, you could go the advanced SCSS way, by creating a function to do the same thing as auto, but why…
1 Like