I found layouts extremely hard to understand. Especially exercises. In the media queries i didn’t get why mosh set just the grid template columns property:repeat (2, 1fr). The layout should be 2 columns and 5 rows. Why didn’t he set up the grid template property as well?
Generally speaking, if you want to have re-usable/flexible css styles, you should avoid hardcoding grids. If Mosh hardcoded 2 columns and 5 rows then if you had more data, the styles would break or if you wanted to resize, it would be more work.
First let’s explain the meaning of the styling value.
Well the repeat function takes two values → repeat (a,b)
a → number of columns or rows
b → column width
In addition, “fr” means fraction.
So looking at Mosh’s solution: “grid-template-columns: repeat(2, 1fr)”
The repeat function is being used on columns so this will mean each grid row will have 2 columns. 1fr means 1 fraction of available space. So we are in one line setting columns and the width of the columns per grid row. Since this is per grid row, we don’t have to set grid rows explicitly because when 2 columns are taken up on the screen, it will flow to the next grid row automatically.