CSS Grid has some more fancy ways of sizing grid columns and rows, such as the “fr” unit, or “fraction” for its full name. This unit allows you to set a grid so each grid cell is a certain fraction of the entire grid column with NO overflow.
Also, you can use the function “repeat()” as a shorthand for specifying the column/row sizes. The repeat() function takes two inputs: The first parameter is how many times to repeat, and the second parameter the pattern to repeat, such as the above fraction unit.
The “auto” keyword adjusts the width of the grid item to the max width of its content. That means that the element auto sizes the column.