If you're familiar with flex, this is similar to setting Flex bases of the items to zero and flex grow to 1 the FR unit helps occupy the remaining space in the grid.

If we change the last value to 50% The last column will first be assigned 50% of the total width and then the remaining space will be divided into two equal parts.

• /* grid-template-columns: 33.33% 33.33% 33.33%; */
• /* Is the same output */
• /* grid-template-columns: 1fr 1fr 1fr; */
• /* Is the same output */
• grid-template-columns: repeat(3, 1fr);