Grid System - UI Design

The grid system refers to a 2D framework that shapes the structure of a user interface. It creates a uniform layout by establishing a balance between the elements and the negative space. 

A grid system breaks up a screen to place and align perfectly all UI elements of a platform. This allows designers to create a consistent layout for all digital platforms. This way, the content appears naturally, cohesive, and more aesthetically pleasing – regardless of the device or screen size used. 

A grid system is made up of columns, gutters, and margins. 

1. Columns

In a grid system, the horizontal space is divided into multiple units called “columns”. They define the width of content areas and are used to arrange content side by side on a page wireframe. This way, the content is placed within these columns. 

2. Gutters

Gutters are the negative spaces between columns. They provide spacing between the UI elements to provide visual clarity. 

The smaller the gutter, the more clutter is created. Grid systems with wider gutters create layouts that are visually calming. This is because the elements (the columns) within the screen have more breathing space, reducing the tension between them. 

The width of gutters can be similar to the margin width – depending on the designer’s needs. 

3. Margins

Margins refer to the area surrounding the grid system. They define the distance between the grid and the edges of the screen or container. Margins prevent content from appearing too close to the edges. 

Pro Tip: Do not confuse margins with padding, which represents the space within the columns themselves.  

‍

• The Base Unit Method

The base unit represents the reference measurement that helps the designer understand how the spacing between elements should be scaled. 

To maintain consistency in spacing, the grid system relies on considering the screen’s size. Because many screens are divisible by 8, the base unit is 8px. 

• Grid System Specifications

The number of columns and gutters can vary based on the grid system’s configuration. 

‍

Grid System for Mobile:

A standard grid system for mobile design includes 4 columns. The uinkits Grid System uses a x  gutter width and a margin of x units. 

‍

Grid System for Tablet:

A standard grid system for tablet design includes 6 columns. The uinkits Grid System uses a x gutter width. The margin area depends on the screen size. The bigger the screen size, the broader the margin area. 

‍

Grid System for Desktop:

A standard grid system for desktop design includes 12 columns. The uinkits Grid System uses a x gutter width. The margin area depends on the screen size. 

‍

To design responsive grid systems and control the area, implement breakpoints. The grids become adaptable to any device type or size, and designers can quickly transform a mobile design into a desktop design – or vice versa. 

Device Breakpoints: 

• Mobiles: from 320px to 480px;
• Tablets: from 481px to 768px;
• Small screen desktops: from 769px to 1024px;
• Larger screen desktops: from 1025px to 1200px.

‍

Fixed Behavior

With fixed grid systems, the screen's width and its components remain constant. The only element changing is the margin size, and increasing or decreasing the screen size triggers it. In the cases of large screens, it might result in having too much remaining space between the margins and the columns. 

Fluid Behavior

A fluid grid system will stretch or contract the screen’s width along with its elements according to the screen size. The components (the columns, the gutter, the margins, and the content) are automatically adjusted to fit the available space, keeping the proportions between them constant. 

This facilitates the transition from desktop design to tablet design to mobile design – and vice versa.  

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find grid system styles and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!