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.
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.
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?
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
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?
I get uneven columns and spaces with this grid system
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.
Thanks man
The height of the row should be 4, not 1
Thanks A lot🙏🙏
malisimso
Is this a 4pt grid system?
Why is this important?
Is there no explanation as to why these settings are used?
Insightful!!🎉
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.
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?
Nice ☝🏽
or just use a plugin called 12 column grid and it'll create you a perfect grid in 1 click
As I can recall, the margin in a android app, as suggested by material design is 16px.
Why do we need rows though?
not every heroes wear capes, thank you
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
I dont like that 20 margin.. can we just make it 16 or 24 please..
Very helpful. Thanks!
why 1 height in row ? i think it should be 4 or 16
I usually just spam auto layout
What is helpful about this ?
Recommended Margin is 15, 20 is too big, lame. What about 4px rows, too small, 8px is enough…
THANK YOU <3
Objeto aplicativo deu vida a isso tudo e publica o projeto se preferir ❤
I really hate how I can’t save this for future use. 🤦🏻♀️
What is the use of F
Why 20 on the edges?
Figma Balls
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?
I understand the first grid, but why the 2nd one? Is it just for better spacing vertically?
Uneless😂
I use 8-point grid system, is that okay for me too?
For desktop?
nice
otto 🤣🤣
Its so helpful thx broo
great tip⭐
and for Dekstop
.
Why is margin 20?