0
anyone know grid-template-columns: repeat(3, 1fr); what does 1fr do?
I just tried to change the value but nothing happened, I just want to understand what it does.
1 Answer
+ 4
This code will make column repeat 3 times making 3 equal parts each size 1fr.
Fr is fraction.
If you have 1 column size 1fr it will be 100%,
If you have 2 columns each size 1fr, each will take 50% of full row.(100% / 2)
Fr make equal parts similar as percentage, except fr include gap in calculations where percentage does not.
Here is more about is, with code examples;
https://css-tricks.com/introduction-fr-css-unit/