Perfect UI Grid System for Mobile

[@ozeiasdsl]

As I can recall, the margin in a android app, as suggested by material design is 16px.

[@RemcoBakker548]

Unfortunately, this will leave you with uneven columns. A better grid would be 25 margins and 16 gutters (for the 390 frame). That leaves you with even columns of 73. Your problem is that 390 is not directly divisible by 8 or 4 if you want to be left with "whole numbers". Therefore you have to account for this by adding 1px to the margin.

[@RemcoBakker548]

Even better…grab an android 360px L frame :-)

[@pragyagupta7536]

What would be a good grid for 375*812? Please help

[@RemcoBakker548]

@@pragyagupta7536 Depends on your design choices...i would probably just accept the uneven number (1px difference) here and design for 374 or 376 :-) E.g. 4 colum setup: margin 24, gutter 16 and 4 columns of 70 or margin 16, gutter 16 and 4 columns of 74. I would not design at 375 nowadays anyway...

[@pragyagupta7536]

@@RemcoBakker548 ok thank for letting me know, then in what dimensions would u prefer to style if not 375? And why not 375?

[@olalekanaleem456]

Can you speak in plain English please

[@Djawedui]

or just use a plugin called 12 column grid and it'll create you a perfect grid in 1 click

[@Mosopia]

or do it yourself and learn to do anything with out any plugins

[@thankgodlove]

I agree. @@Mosopia

[@thecasual1011]

@@Mosopialearn how to do it without plugins then use plug ins to speed up work flow* Work smarter not harder

[@prateekghanghas4751]

​@@Mosopiayou don't need to re-invent the wheel unless you are interested in the research area . That's where most people get stuck , learning is good but you should know when to skip something and when to not , if you have to take a car from A to B , you don't waste your time figuring out how the engine is working . If there is back camera in car , would you tell a person to learn to reverse your car by seeing in side mirror? When there is already a better solution there , the back camera 😄 .

[@quepongoo]

Hi Mizko, can you explain how you solve the problem on 390px wide frame, using 20 for margins + 16 for gutters results in a 388 container and 2 off pixels. Can you give a solution to this?

[@views-re2om]

why 1 height in row ? i think it should be 4 or 16

[@footyreels2926]

I did this and the column are not equal Try creating a rectangle the size of the first column duplicate across the frame you would see that some columns have a difference of 1px

[@renieljustincole5615]

Is there no explanation as to why these settings are used?

[@uiuxdesigner101]

Are you working on any complete UI/UX Course?

[@Mizko]

I already have a Figma Masterclass and Practical User Research Masterclass out. The next course is the complete UX/UI but it excludes Figma and Research. You can learn more about it here - thedesignership.com

[@useeerrr12587ll]

not every heroes wear capes, thank you

[@aminansar5294]

Very helpful. Thanks!

[@nobody-bt7mu]

Will try using this! Thanks

[@mattbell8426]

The height of the row should be 4, not 1

[@JaysKitchen_]

Insightful!!🎉

[@adevikthur]

I use 8-point grid system, is that okay for me too?

[@adilbek.ermekov]

Yes

[@vekkdrums]

That's even better

[@zedrake]

This is still an 8-pt grid system mate. the gutter is 16 and the verticals are spaces of 4 so both still in your 8pt system

[@adevikthur]

@@zedrake Thanks

[@adevikthur]

@@adilbek.ermekov Thanks!

[@uxvoin]

Recommended Margin is 15, 20 is too big, lame. What about 4px rows, too small, 8px is enough...

[@HollowsDarkness]

I understand the first grid, but why the 2nd one? Is it just for better spacing vertically?

[@oluwashinaayomi9737]

It’s for vertical spacing…

[@ChrisG59]

THANK YOU

[@pearlkoya4316]

What is the use of the rows??? Aren’t columns enough??

[@Mizko]

You don't have to use rows, it's a self preference.

[@adilbek.ermekov]

To make the vertical spacing consistent

[@camelcase_4336]

@@adilbek.ermekov That's what auto-layout is for, much easier for vertical (and horizontal) spacing consistency.

[@buildwithori]

Honestly, having rows make your life easier.

[@adilbek.ermekov]

@@buildwithori how come?

[@RuthDeLeon02]

I really hate how I can’t save this for future use. 🤦🏻‍♀️

[@joelblenman8840]

Why not?

[@RuthDeLeon02]

@@joelblenman8840 I mean, saving the reel.

[@user-xf7mu7ub9d]

@@RuthDeLeon02 first of all: it's not a reel. Second, copy the link and replace "shorts/" with "watch?=" and it should open it as a normal video :3

[@Advancedrookie]

@@user-xf7mu7ub9d Thanks!

[@burakkok9806]

four columns, 20 margin, 16 gutter. auto rows, 1 height, 4 gutter. there you go you saved it... wasn't that hard huh?

[@jhonrahmat6075]

Its so helpful thx broo

[@bahaeddinebenamieur9404]

I dont like that 20 margin.. can we just make it 16 or 24 please..

[@kohaxiii6583]

same

[@blissful_oasis9430]

Thanks A lot🙏🙏

[@rajani_soni]

great tip⭐

[@silasamio4359]

Thanks man

[@kasper0341]

Nice ☝🏽

[@fernwehtwl]

it would be nice to know WHY you are saying this is perfect otherwise it can be any number. Why 20 and not 24? why not 30? This video isn't helpful without a backup explaining the reason why. And what is the purpose of the rows?

[@sandipan8363]

Is this a 4pt grid system?

[@olaviarmfelt5711]

this is so cool man, vielen dank

[@Notsussybaka900]

Figma Balls

[@lucidvisions9965]

What’s figma

[@felipemfrudeli]

@@lucidvisions9965 its a site for design

[@MobiusCoin]

Why 20 on the edges?

[@odionjoshua5581]

❤ thanks alot

[@jerryhong9267]

nice

[@0xtz_]

For desktop?

[@alekejoshua289]

thank you

[@Mizko]

Anytime!

[@pawankumar-qn3dq]

What is the use of F

[@mehdicharife2335]

Why do we need rows though?

[@oviepaulej]

It can help to keep your vertical spacing even

[@akbarbadsha25]

and for Dekstop

[@austincodes]

I usually just spam auto layout

[@fvandrade]

Objeto aplicativo deu vida a isso tudo e publica o projeto se preferir ❤

[@davidcardew6853]

I very much dislike videos like this because they say "perfect grid" but never say why that's the case. Never design something without knowing the reason why because you could run into some bad design habits.

[@ologwusamuelogbonna3027]

Why is margin 20?

[@Sagar-np6zc]

Generally, all the products use a 20px margin, although It depends on the product, if you are designing for e-commerce where you have to include a lot of categories or show most of the things then we use 16px

[@NoneOfyourBusiness468]

Why is this important?

[@jahspazz6010]

Uneless😂

[@labbie1148]

otto 🤣🤣

[@boomshakalaka656]

What is helpful about this ?

[@matiasferrero7584]

malisimso