We access content through different devices and screen sizes. And these apps should adapt to make tasks accessible for you, no matter the screen size you're working on.

This technique was named as modular design, and it was implemented by newspaper designers long time ago, but modules are popular for other design styles as well, because the use of a distinct grid is a good way to organize and manage content.

In the website design landscape modular concepts can be easy to work with when designing for responsive frameworks and the grid-style format works especially well with some other trends such as cards and minimalism style. So the main issue today is adapting content to the different screens and devices in our hands, in this article we’ll show you how to create your own responsive grid system.

A grid is a structure used to organize the content of a design; it establishes alignment and order. Whether you’re designing a layout for web, tablet, mobile or merging photos and text to create a landing page, a grid will assist you in making design choices and providing a positive user experience.

‍

What is a layout?

‍

In graphic design, **page layout** is the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives. The **layout anatomy**

are the blocks of content such as the header, the navigation or the footer; the content can span over any number of columns and resize with the grid, layout **margins** are the outer margins of the grid.

‍

How to work with grids

‍

In terms of its application to the web design process, the grid system aids in the alignment of page components using successive columns and rows. Grids facilitate the process of designing wireframes, templates, or standardized layouts for comparable sites since user flows often comprise several screens or windows that repeat similar design schemes and layouts. Before we get into the types of Grids and how to use them, let's first understand some terms involved in this concept. So we will briefly explain the following:

- Columns;

- Gutter;

- Margin;

- Breakpoints

‍

‍

Columns

‍

These are the foundation of grids. They determine the area where the content will be positioned. The number of columns will depend completely on the size and resolution of each screen breakpoint. The most common frameworks use a grid system of 12 equal-width columns; this provides designers a lot of flexibility over a layout.

Gutters

‍

Gutters are the gaps between the columns. Gutter widths are fixed values (8px , 16px or bigger) based on breakpoints.  8px gutter for  small screens from 320px width to 655px width is the recommended size and the 16px gutter applies for screens from 656px and up. You can also use a bigger gutter for wide screens.

‍

Breakpoints

‍

Every device has particular breakpoints according to its screen size like mobiles, tablets, watches, and desktops. The concept of breakpoint is essential to understanding responsive design.

‍