If you want to join 50,000 people learning from my books and courses go to:

square.one

And start with a free account!

This is simply the best approach.
But there's also the other 20% of usecases that I will cover later.

If you want to see that post, make sure to follow me
@michalmalewicz

and of course like / comment and bookmark this one for easy reference.

Having larger (32p) margins on the sides, assuming your content is big enough and readable, naturally allows LESS text to be visible per line.

That means it's easier to focus on what's there and read it.

For most B2C products that are supposed to be friendly...

use that same spacing (24p in this case) for vertical spaces between similar groups.

You can space out completely separate sections by 32 and 48, but that's a story for a whole other post.

Why this works and when?

If you ever used my Hierarchy Strips method (it's in most of my courses) then you'd know we cannot do another 32px between them.

That will mess up the hierarchy and grouping.

To make it flow naturally, decrease the internal gutter by your grid value (-8p) and...

Most mobile interfaces are single column on purpose.

It helps with readability and avoids cognitive overload with the attention only going down.

But sometimes you do need two columns. What then?