Grid System
When we start web design, we make our website responsive and a grid system is needed. Setting up a grid system for web design is good practice and it is very helpful in designing for different screen sizes. The grid system will be very helpful in designing web developers.
Today we will learn the rules for creating a 1320 size column grid system
Column Grid
The column grid for the web is the most commonly used form of a grid. These grids mostly consist of 12 columns that help to align the objects of the design to perfection. The smaller the screen size, the lower the number of columns.
First, we will create a new window in the figma file, then we need to create a frame and the frame size will be 1920W X 1080H. If the height is low or high, there will be no problem.
I will click on the (+) of the layout grid from the bar on the right, the grid box will actually select Commons from the dropdown.
The boxes below should be numbered according to the ratio.
The boxes below should be numbered according to the ratio.
Count 12, I will center from the type dropdown, width 88 and Gutter used 24.
Then our 1320 grid will be created
The gutter is the empty space in the middle of the column
To hide the grid, you have to turn off the eye on the left side of the column.
The layout is beautifully presented using the grid and the proper use of white space can emphasize the importance of the content.