A beginners guide to Grid System

6 min readSep 11, 2022

Introduction :

If you’re a UXUI or product designer, you’ve probably come across the term “Grid System.” When I first learned about the grid system, I couldn’t get the concept, though my mentor explained it to me repeatedly, even after I asked a series of doubts. As a result of my tainted knowledge, I began to use it solely when working on a dashboard or a web application. After completing several tasks utilizing the grid system, the underlying principle was crystal clear to me. As a result, I’ll explain the grid system and its fundamentals for beginners in this blog.

If you’re already utilizing the grid system and came here to learn more about it, I’ve written a blog on “Advance Grid System” you can skip over to that blog.

Context

Introduction
What is a “Grid System”, and what are its uses?
Anatomy of the grid system
Base unite
Basic grid specifications for various screens
Spacing b/w elements using the grid system
Breakpoint
Responsive grid system
Conclusion

What is a “Grid System”, and what are its uses?

A grid system in UXUI design is a 2D framework that allows designers to align and space items and components on a screen. Using grids to break up a single screen can enable designers to place and align objects better.

The usage of grids aids in the design of a seamless user flow and makes the information, aesthetics, and experience more desirable to the user.

Anatomy of the grid system :

A grid consists of three parts: columns, gutters, and margins.

Now you might be wondering, “How do I utilize it?” “How should the number of columns, gutter width, and margin be determined?” “Are there any rules I should follow?” etc… To use the grid system efficiently, you first need to understand the base unit (spacing basics).

Base Unite :

The base unit is the measurement used to determine what multiples the spacing of screen elements, components, and typography should be. The size of the screen is also crucial to maintaining consistency in spacing. Since most screens are divisible by 8, the most suggested base unit is 8px because it makes scaling for a wide range of devices simple and consistent.

Basic grid specifications:

You should now understand the terms grid and base unit. So we’ll discuss how to use it effectively.

Mobile:

The most typical grid specification for mobiles is four columns, a gutter width of sixteen, and a margin area of twenty-four.

Tablet:

The most often used grid specifications for tablets are eight columns, a gutter width of 24dp, and the margin area depending on the screen size; bigger screen sizes use broader margins, while smaller screen sizes use narrower margins.

Website:

A typical grid specification for a website consists of 12 column rows, a gutter width of 20, and margins depending on the screen size.

There is no standard grid specification; assign values based on your flexibility or design requirements. By practising with the grid system, you’ll learn how to assign values based on your design specifications or requirements.

Spacing between elements in the grid system:

In grid systems, the UI elements should be incremental to the base unit. It creates a clear hierarchy, neatly aligns items, and offers a regular visual rhythm if it is an increment to the base unit. Assume that the base unit is 8. As a result, the element spacing should be 16px, 24px, 32px, and 40px. The padding area of the UI elements is the same. Predictable padding appears attractive, explains the relationship between items, and helps readability.

Breakpoints:

“A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation, each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.” — Google material design.

Developers and designers can easily control how a design scales away from mobile to the desktop by implementing breakpoints. By doing so, we can make our designs adaptable to any device size without compromising user experience.

Various devices breakpoints:

1. Mobile — 320px to 480px

2. Tablet — 481px to 768px

3. Small screen laptops — 769px to 1024px

4. Large screen laptops — 1025px to 1200px

Responsive grid design:

You now understand what a breakpoint is. So let’s get started with responsive design. Layout grids must adapt to a wide range of screen sizes and scale up and down to retain usability. You could ensure consistent behaviour throughout your design by establishing a uniform layout grid and setting breakpoints.

Fixed Behaviour:

In fixed behaviour, the screen’s width and its elements (container) are constants. According to the screen size, the margin of the screen increases or decreases. The design elements are permitted to remain in a fixed position, in this case, resulting in too much empty space in margins for extra big device sizes.

Fluid behaviour:

A fluid behaviour screen will stretch its width and its elements (container) according to its screen size. The screen elements are adjusted here while keeping the gutter, columns, and margin constant. This behaviour takes advantage of available screen space, although components may appear stretched out.

Conclusion:

I’m publishing this blog to help you grasp the fundamentals of the grid system. I believe you understood the grid system. If you want to learn more about advanced grid systems, check out the blogs listed below. Thank you for taking the time to read my blog. Check out my profile for more such blogs. I’ll see you all again in my next blog! Please leave any blog topic recommendations in the comments section till then. Bye! ;)

Blogs about advanced grid systems:

Check out my other Informative Blogs!