What is a Grid?

So to start with, let’s understand What is a Grid? 

Grid is a collection of rows and columns along with margins, and spacing between each row and column. A designer can always tweak the number of rows or columns required and also the margin and spacing between each of these rows and columns. 

The optimal use of grids serves as a guiding layout for overall designs. It helps to create consistent templates and standards. Using baselines (columns and rows) and padding( gutters and margins) it becomes easy to configure multiple screens at once. Grid ensures a balanced hierarchy of screen elements. Grid systems have different types of grids(which we’ll have a look at later in this article).

Let’s look into some basic terminologies used in grid systems:

• Columns: The vertical containers that hold some element like images, or text. Occupies most of the area in a grid. Depending on the screen the number of columns varies. 
  For example, Mobile screens have 4 columns in a grid and laptop/desktop screens have 12 columns in a grid. Below is an example of how columns look. 
• Rows: The Horizontal containers that hold some element like images, or text. It is similar to a column but is not mostly used unless required. 
• Gutters: The spaces between 2 columns or rows also called “Alleys”. Gutters have set values but depending upon the screen they also vary. Large screens such as laptops or desktops have wider gutters whereas small screens such as mobile phones have thinner gutters. A combination of columns and gutters takes up the horizontal width of the screen.
• Margins: The spacing on the left and right of the screen where no screen element is present. Margins help in making the screen feel dense but not cluttered. The size of the margins may or may not be the same as the gutter, generally is it more than gutters. It marks the boundary for screen elements. Helps in fixing the layout.

These were some basic terminologies a designer should know before using a grid system. One thing to keep in mind is that “Elements don’t need to end at the same marking but all elements should start at the same marking” when using a grid system.

Grid layouts are the building blocks of final amazing-looking designs. Creating symmetric and unified designs using grids is very important. Effective use of grids helps designers in creating designs that are simple for end users to scan and use. Grids ensure consistency across different platforms by adjusting to different screen sizes and orientations. In this article, we’ll dive deep into the concept of grids and understand how to use this tool to create consistent and unified designs. In this article, we’ll cover Grid System In UI Design. 

Depending upon screen sizes, we have some guidelines to use grids. These guidelines are globally accepted, and help in better articulation of designs concerning specific screen sizes.

The topic we’ll be looking at to understand grids better:

• What is a grid?
• Basic terminologies used in grids
• Types of grids with examples
• How to use grids
• Benefits of using grids