How do you use the 4px grid in a mobile screen for iPhone 11 Pro that is 375px?
Margin 16px / gutter 16px? Then it requires to be four columns with a width of 74px however, one of them should be 73px.
How would you adjust this?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityShort answer: It doesn't matter
The only thing that matters is that you maintain the important spacing in your design (touch areas, padding or margins at the edges, spacing at the top and bottom, safe areas, etc.). When coding, gutter and margins between columns are automatically adjusted.
So as long as the programmer can see the important spacing mentioned above and the number of columns each element will take, it's acceptable for an element to be off by 1px. Moreover, this will only be the case for a few Apple devices, and you don't have to do ALL devices for ALL brands, it would be tedious and pointless. Not to mention that it's inherently impossible to use a base-4 or base-8 grid on an odd screen.
In short, for the purpose of your particular question, don't worry too much. But I'd recommend that you simply choose a standard size, and you won't have this problem.