What is wrong with APPLE's phone devices when it comes to grids? It's impossible to get equal margins no matter what you'd do.

Here is an example:

enter image description here

Original image link

May anyone have a solution for me? Thank you!

  • 585. Take 25 for each margin. 535. Take 17 for each of 3 gutters. 484. Divide by 4 for the columns. 121. Or similar. Why doesn't such math work? Sep 26 at 12:21

While it is not usually very intuitive, it's pretty easy to define margins, columns and gutters that follow round figures.

You have to simply be cognizant of 3 aspects in this specific order to achieve this:

  1. The margin size you wish to leave on each side (this is usually easy to identify given that you know the screen resolution you're targeting your design towards).
  2. The total number of columns—and consequently, gutters—you want.
  3. The gutter and column size combinations you could use to accommodate your layout.

Let's explore your own example of iPhone 12 Pro resolution 585x1266.

If you plan to leave 15px margins on each side, it leaves you with 555px to distribute among your columns and gutters.

    585px     -       (2 * 15px)        =           555px
screen width     margin on either side     remaining screen width

For your 4-column 3-gutter layout, you would need to pick a total gutter width that's divisible by 3, such that your remaining screen width after taking out the gutters is divisible by 4.

Here are the possible whole combinations for a 15px margin:

 Total Gutter Width | Remaining Screen Width | Column Width
     5px * 3 = 15px |                  540px |        135px
     9px * 3 = 27px |                  528px |        132px
    13px * 3 = 39px |                  516px |        129px
    17px * 3 = 51px |                  504px |        126px
    21px * 3 = 63px |                  492px |        123px
    25px * 3 = 75px |                  480px |        120px

And while I can technically keep going to the point where the gutters exceed the column width it would be illogical from a design perspective to do so.

You can do this with any pair of margin sizes. I'm not sure where exactly you're facing an issue.

Not the answer you're looking for? Browse other questions tagged or ask your own question.