Skip to main content
joaosp
Inspiring
January 24, 2019
Question

How many columns would you recommend to use on grid when designing for mobile?

  • January 24, 2019
  • 1 reply
  • 1817 views

I've downloaded some adobe xd grid "defaults" and every xd file I downloaded suggests a different grid to use on mobile: one shows 3 columns, another one shows 6 columns, another one shows even 12 columns. My mind is a mess around this subject.

So, how many columns (and gutter value too) should I use when designing for a mobile screen (or when transposing a desktop layout to mobile)? I have 3 artboards with the same design (in my case, a landing page). See below my grid config to each of them (bearing Bootstrap in mind):

Artboard - Desktop 1366 x 768

12 columns / Gutter width 30 / Column width 70 / Margins 98 (value for left and right margins)

Artboard - Tablet 768 x 1024

6 columns / Gutter width 30 / Column width 90 / Margins 39

Artboard - Mobile 375 x 667 (iphone 6/7/8, not plus)

3 columns / Gutter width 30 / Column width 95 / Margins 15

I got those grid measures/values from a XD grid freebie from the internet. However, every website says something different, and I'm in a deep doubt about if those values are good or the recommend ones, specially talking about mobile, because I've read that we should use 2 columns on grid when designing for mobile, and I'm using 3 columns. I started asking that to myself because I'm in doubt about a specific section of my landing design, I mean, I couldn't think how to distribute some texts properly on the section.

So, what would you recommend me to use? Are my grids "correct"?

This topic has been closed for replies.

1 reply

Participant
January 24, 2019

I personally user 4 grids, I find 6 or more is a bit much for smaller screens.