Grid Column View with Gutter and Repeat Function

Question

In my app, I am trying to design the page with grid view. I want my app to be optimized for multiple screen sizes and I have information regarding them. For example; 360px width screen has 6 columns, 10px gutter and 18px margin and, 840px width screen has 12 columns, 12px gutter and 26px margin. I want to use the grid-template-columns: repeat(..., ...fr) function to optimize elements according to screen widths. I couldn't figure out how to achieve this so what should I do to move given screen size properties to repeat function?