used to determine the size of the grid track and means that the track can take some (or all) of the available free space.
use fr, the content in the cells will not break, but it will fit the content, and using % will do the opposite
px is a fixed unit, and fr is divided by the remaining size
Ex: grid-template-columns: 100px 1fr; /* Two columns: the first has 100px, the second takes up the rest of the grid container */
Using "px" for responsive design can be problematic and is generally not recommended. Because it represents a fixed size that does not change regardless of the screen resolution or device size.
This lack of flexibility can lead to several issues:
lead to less flexible and responsive layouts.
may result in a layout that looks great on one device but appears small or oversized on another, leading to an inconsistent user experience.
What is the effect of Fr Unit?
grid-template-columns: 100px 1fr; /* Two columns: the first has 100px, the second takes up the rest of the grid container */