How many columns would you recommend to use on grid when designing for mobile?
Copy link to clipboard
Copied
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"?
Copy link to clipboard
Copied
I personally user 4 grids, I find 6 or more is a bit much for smaller screens.

