css fr

1/* 
2the fr unit is used in css grid layouts
3that translates to "one fraction of the grid"
4for example
5*/
6
7.grid
8{
9  display: grid;
10  grid-template-columns: 25% 25% 25% 25%;
11}
12
13/*
14Here I want to have 4 rows that are a quarter of the grid each,
15to avoid overflow. But what if I happen to add a fifth row? I'd have
16to manually set each part to 20%, and that might be uncomfortable. So
17a better approach for this would be to use fr
18*/
19
20.grid
21{
22  display: grid;
23  grid-template-columns: 1fr 1fr 1fr 1fr;
24}
25
26/* 
27Here if I add another column, the other ones will be automatically resize to
28make it fit
29
30I hope I could help you :)
31*/

1the units used in css grid are as follows:
2  1) fr: sets the column or row to a fraction of the available space.
3  2) auto: sets the column or row to the width or height of its content 
4            automatically.
5  3) %: sets the column or row to the percent width  of its container.