How to convert pixel to fr in css grid?-CodePudding

I have a div container with a total width of 1000px and I decided to separate 5 columns using a CSS grid. grid template columns : 100px 100px 100px 600px 100px; how to convert this pixel to fr ? grid template columns : ?fr ?fr ?fr ?fr ?fr;

CodePudding user response：

You can use 1fr 1fr 1fr 600px 1fr which will make 4th one off 600px and rest will adjust according to remaining space

CodePudding user response：

Can you please elaborate more on this? You haven't specified gap you want or not. what can you do for now

  grid-template-columns: 1fr 1fr 1fr 6fr 1fr;

Also, let's say if you want a gap of 10px between the columns, then the same could be acheived by:

grid-template-columns: 1fr 1fr 1fr 6fr 1fr;
grid-column-gap: 10px;