DEV Community

Discussion on: CSS Grids Simplified!

Collapse
 
markjwood profile image
markjwood

I think you might be misunderstanding fr units.

fr units are fractions of the available space. As you wrote it, 3fr is exactly the same as 1fr which would be exactly the same as 1000fr. You're saying basically, "divide the total space by 6 then give each column 3 of the 6 units. "

Alternatively, you might have done something like grid-template-columns: 2fr 1fr and that would make the first column take 2/3 of the available space and the second would get the remaining third. But if you want all columns to be equally divided, 1fr for each will do it.