The Grid System for Beginner

The grid system is a must know basic knowledge for UI designers.

Why its important?

Here is the example.

Left side is no grid / Right side used 12 bar grid system

The biggest mistake junior designers make is to think that the design they see on their monitors is the same as on others’ monitors.

No. Its not. There are thousands of different sizes of monitors/phones.

So how we can design for everyone? Thats why we should use the grid system.

For mobile : Total width: 360px / Offset: 20px / Gutter Width: 16

For desktop: Total width: 1200pm / Gutter Width: 30 / Column Width: 44 or 42

When you set up grid system like this, you can design any types of layout very easily and it looks very clear.

Here is the grid system guide in Google Design: https://material.io

I got a lot of information from this site. Its very easy understand and clear explanation!

Hope this helps you!