A grid is most often used as an underlay to a design or drawing, to oversees the positions of elements. A grid can help accelerate that hierarchical process and make it easier too.

My biggest mistake as a beginner is I never used grids before designing because design software has alignment tools. But better practice is to use grids.

The grids are known well for bringing order and clarity to your designs to improve the overall look and feel. It balances the layout and speeds up the design process. And also they are flexible.

So, I started using grids and most recently I used two grid layouts which helps me in designing.

Modular grid

Modular grids provide a balanced layout by dividing up your content into equal standards but the ability to span multiple columns ensures the content appears charming and engaged.

A module is established at the intersections. It is a rectangle with width and height that underlies the theme.

I create a card without using a grid. This is an example below.

Without Grid

Now, I used 8x8 rectangle modules. Because the screen size in pixels is a multiple of four or eight for most common devices. So it will easy to develop or design an interface.

And also it will easier if all margins and padding values will be even.

All margins are multiple of 8 like 24,56,98,144px etc.

All building system must be fixed up using this grid — line spacing, alignment of elements, positioning, white space, sizes, icons, visual hierarchy etc.

With Grid

Now its look perfectly aligned and maintain the hierarchy.

Column grid

This column-based structure is used to place text, images and procedures consistently throughout the design. This grid layout helps in responsiveness.

In responsive layouts, the column width is defined with percentages, rather than fixed values. This allows content to adapt to any screen size. The number of columns displayed in the grid is specified by the breakpoint range.

First of all, below one is again an example of without grid.

Without Grid

Text and images are placed that follow the vertical lines and flow lines making up the columns. They are the thick coloured blocks that make up the content width of your design.

The number of columns changes from 14–16 on the large desktop to 12 on a desktop, to 6–8 on tablets and 2–4 on mobile.

Column Grids

I use standard a 14 column grid according to a large desktop screen and the size of columns are 72px, the size of gutters is 24px and the side margins are 12px each.

Now, perfectly balanced

Results in creating a clean and organized space. Hard to notice the difference but now it is more ordered and balanced.

Here, gutters are the space between the columns and side margins are the amount of white space outside of your content width.

For tablet I use a 6 column grid, the size of columns are 102px, the size of gutters is 24px and the side margins are 16px each. For mobile I use a 2 column grid, the size of columns are 136px, the size of gutters is 16px and the side margins are 16px each.

For mobile screens

Conclusion

In this way, grids make it easier for you to create a hierarchy. It establishes equilibrium with its symmetrical layout, which you can use to balance out your elements and decide if one side overpowers the other.

The grid principle is also commonly used in art and photography to understand the balance point. They are also other types of grids — baseline grid, manuscript grid etc. But make effective use of grids in your design and development.