Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than the CSS grid expects them to be, which leads to certain problems with the whole layout (elements can shift position because of number rounding)—in the end it doesn't look the same in a browser.
To illustrate it better, let's take Bootstrap's values: column width for the biggest container is ~97px. So, how should I lay out the grid in a graphics editor, should I round it to 97 or 98, or perhaps I should forget about these precise values and design not for the exact pixel numbers, but for the amount of columns instead—whatever the width?
I mean, I just can't get over the fact that it won't look the same, paddings would be different from how I drew them (sometimes even different from one another in case of an element taking 100% of a column [or two] width, say, a button with some text on it can have the padding-left of 30, and the padding-right of 32; it's noticeable and isn't right), widths would be different, gutters would be different, and so on. I don't understand how can you create functional and beautiful interface with this inconsistency and lack of precision.
Can you please share your experience? How do you do it? Am I wrong about something? Maybe there's something good I can read on designing for responsive/fluid grid systems? Thank you very much, and hopefully I'm in the right place to ask this question.