Hey Folks!! Do you know about Grids Size Guide?

Those who are starting in UI/UX Design Career must have known and also felt some what difficult to implement these guides. So here I am giving a brief about grids. Some designers use them and some don’t according to their comfort level. But its always best to have knowledge.

Grid Terms : Mostly the grid terms we use are columns and margins and Gutters
Types of Grids:
Fixed Grid: In this Grid Gutters are fixed, columns are fixed but margins are flexible.
Flexible Grids : In this Gutters are Fixed, Columns are flexible, and margins are fixed.
Hybrid Grids : In this Elements and sections have distinct rules

There are certain rules that we use grids for different devices
For Desktop : Example if the screen size is between 1289–1439,
margins = 96, width= flexible, columns =12.If it is screen size is 1440+, margins=Flexible, Width=1280 , No.of columns =12

For Tablets : Use 8 Column Grid to keep the consistency of a tablet layout. I t will keep element sizes and spacing consistent. The only difference will be adding more content row. This also reduces the development cost, which is always a plus.

Example: 1.Screen Size =600–960, Margin=32, Width= Flexible, Columns=8
2.Screen Size =960–1279, Margin=Flexible, Width= 840dp, Columns=12
For Mobiles : Suggested using Either 1,2,4,6,8,or 12 Column Grids. This ensures that the elements from the screen are in the line with the navigation bar. But mostly 4 columns are preferred as it is easier to code.
Baseline Grids: Setting up a baseline grid will help you keep invisible rhythm across the entire height of your design. Defining the baseline Grids also helps determine the line -height, letter spacing, and paragraph spacing.

Important Tips :
1. Always ignore grids when designing paddings inside the containers
2.Dont use margins smaller than 12 on mobile.
3.Stick to grids most of the time , but break them if context requires it.
4.use 4pt or 8pt soft grids to ensure consistency.

Related posts:

My first mathematical and overall nerd hero is John Forbes Nash. His life was explored in the book and the biopic A Beautiful Mind. The movie and then the book is where I became enthralled with math…

Seviyeli Sosyal chat ile sizlerde İnternet üzerinde kendinize aradığınız seviyeli erkek ya da kız arkadaş edinebileceğiniz birçok bir ortamdasınız. hayatınızda daha çok seviyeli kullanıcıların içinde…