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?
Add a comment
|
1 Answer
Short 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.
-
Just a little extra - your 4px grid is based on a 72 pixels per inch standard but the actual iPhone 11 Pro runs at ±458ppi (Just grabbed from google - could easily be wrong but that's not the point). A good development team will be using "relative" units that shrink and grow with the overall size of the screen they're on ensuring that your design looks the same whether it's shown on an iPhone 11 Pro or a Samsung S20. This is why we tend to use a standardised size to design on as Devin suggested Feb 17 at 16:28