Grid System helps designers to organize the layout and helps to get a consistent experience in interactive design on devices with different screen sizes. This interactivity means that users find everything where they expect.

Before continuing, let's have some definitions together.

A grid consists of three main parts: columns, gutter and margins

Columns

Columns are imaginary vertical blocks used to align content. Their width can be % or fixed width.

Photo description: On mobile, at a breakpoint of 375 dp, this grid layout uses 4 columns
Photo description: On mobile, at a breakpoint of 375 dp, this grid layout uses 4 columns

Gutters

The gutter is the space (padding) between the columns. Gutters are used to space the content of the page and have a fixed width.

Gutters in Responsive Grid
Gutters in Responsive Grid

Margin

The margin is the space between the page's content and the screen's edges.

​​Margin in Responsive Grid
​​Margin in Responsive Grid

Content, including photos, videos, or user interface elements, is always inside a visible or invisible Container. The visible container has a Border or Block filled, whereas the invisible Container has invisible blocks.

Visible Container includes components such as cards, banners, etc.

The Parent Container starts from the edge of the Column and ends at its edge.

The content inside the Parent container is placed independently, and it is not limited to the Column.
The content inside the Parent container is placed independently, and it is not limited to the Column.

Desktop Layout Grid in Prototyping Tools

To create a Layout Grid for the desktop, it is better to consider the 1280*800 size because this size is the smallest possible size for the desktop view mode, which can easily be adapted to larger screens. But on the contrary, it will be challenging to adapt the screen from large to smaller pages. (therefore, for desktop design, preferably do not use 1920*1080, 1600*900, or 1440*900.)

We suggest setting the Column width to 72 px, the Gutter width to 32 px, and the Margin width to 32 px.

The Parent Container starts from the edge of the Column and ends at its edge.

Mobile Layout Grid in Prototyping Tools

The suitable frame size for mobile is 640*360 because it is the most manageable size to be adapted to other screen sizes. But today, most mobile phones have wide screens, so it might be better to consider wide layouts.

We suggest setting Margins to 16 px and Gutters to 8 px. Since the mobile phone size is small, selecting 12 columns makes it challenging to work; usually, 2 or 3 columns are combined to create 4 or 6 columns.

Horizontal rows

If your design is pixel-perfect and perfectly aligned, you can use horizontal rows next to the columns.

responsive1

Thank You!

 We hope this guide brings some help to kickstart your responsive design projects with a solid grid foundation.

Leave a Reply