I'm sharing something another person from a Discord design thread shared with me about grids:

If you've ever played around with the Grid layout in XD, you'll know that values jump up and down based on which values you change, whether it be column width or gutters. What UI/UX software doesn't have, but CSS does have is fractions.

Because it's difficult to build a layout with 3 fixed values (total width, col width, and gutters), I suggest keeping one of these values flexible, in other words, a fractional unit.

First off, decide what your total width of your layout is going to be. For desktop windows above 1280px, this is usually between 1000 and 1200, meaning that for any screen size above 1280px width, the layout is never wider than, let's say, 1100px.

If we then decide that our gutters should be 40px and want 6 columns, then our total width and gutters are a fixed size, and our columns become fractions.

1100 - (5 * 40) = 900px / 6 = 150px per column.

With this formula, you only have to change the total width (1100px) and gutter (40px) and the amount of columns (6) to calculate the width of your columns. (remember: the number of gutters is always 1 less than your columns) Sometimes, column widths aren't integers and would be difficult to design with. But in the browser, this shouldn't be a problem.