Wanna make user-friendly, pleasantly aesthetic websites? Use modular grids. The modular grid is an instrument for organizing visual space.
Let’s look at why the modular grid is so popular and how to use it.
The modular grids came into web design from typography. They are used in all printed materials to organize the information on the page. At the beginning of the 20th century, modular grids began to be used in web design.
Website built with the modular grid example from Pinterest
The reasons why we use them in web design so thoroughly nowadays are:
The modular grid is an instrument, not a design method. Thus, before using the grid, you need the concept of a future site.
When the concept is ready, describe all blocks of the web site pages and blocks elements.
Open or create the modular grid in the image redactor.
Draw blocks on the modular grid.
Hint: the left and right borders of the blocks always start and end on the columns, not on the gutter. The borders always coincide with the borders of the columns, as shown above.
The top and bottom edges of the blocks always coincide with the rows of the font grid, so the horizontal rhythm will be uniform and aesthetic.
The site layout is ready!
There two ways to get it: draw the grid by yourself or use the grid generators.
Hint: the common working area width is 960px. But nowadays there are a lot of widescreen monitor users, tablet users, and smartphone users. Thus, the team which created the front-end framework Bootstrap recommend to increase the common working area width:
Remember that your website should always have an adaptive design. Thus, you should always draw several modular grids for the devices with different screen sizes.
In web design, it is common to use the modular grid with 12 columns. The other possible modular grids use 16 and 24 columns.
Columns are vertical rectangles that separate the page into parts. The gutter is the distance between columns.
Example: You have a 1200px working area and decide to use 12 columns.
1200px / 12 = 100px for each column
Hint: For different working area widths, use different columns and gutter widths.
Add 30px gutters. Now it’s 12 columns with 70px width and 11 gutters with 30px width.
100px = 70px + 30px
Hint: The gutter cannot be less than the size of the base font size.
Add 15px to the left margin for the leftmost column and repeat for the right margin for the rightmost column. Calculate:
1200px = (70px * 12) + (30px * 11) + (15px *2)
Draw the Font Grid
The font grid is the horizontal rows that define a vertical rhythm and font location. The distance between the font grid rows is equal to the line height of the main font.
Example: If you use a 15px font for the main text, the line height and the distance between the lines will be 24px.
Hint: To calculate the line height, use the Golden Ratio Typography Calculator.
Merge the font grid rows into groups of 3 or more rows. Now you have horizontal columns with the distance between them that’s equal to one row. Those columns add horizontal rhythm to the modular grid.
From this point, you have a complete modular grid and can use it.
Online modular grid generator: use it to get the detailed grid and download it as a Photoshop pattern.
Hint: There is some confusion about Modular Grid Pattern grid settings:
You can download the Modular Grid Pattern extension for Photoshop from this site. The extension allows for creating grids directly in Photoshop.
You can’t setup margins in Modular Grid Pattern. Always keep this in mind, and add margins to your grid in Photoshop.
Online modular grid calculator: This allows you to create a modular grid without a font grid. The cool thing about Grid Calculator is it allows you to properly calculate column width.
Hint: Set the max working area width and the number of columns, margins, and gutters. Grid Calculator calculates your column width and shows current working area width. If you use the right properties, the page width will be the same as max working area width. If not, Grid Calculator shows it.
After creating, you can download your grid as a picture in PNG format or as a file for Photoshop or Illustrator.
Ready modular grid for 960px working area width. Download it and use with Photoshop, Fireworks, and other image redactors.
Online modular grid generator which allows creating a responsive grid system.
Using it, you can set the number of columns, column padding, gutter, and working area width after you set a breakpoint from where you will build the grid for different screen widths.
In web design, the breakpoint is the point on which your site content layout changes to provide the user with the best possible layout depending on the device screen size.
When you build a number of grids for different screens, you can download them all as PNG, CSS, LESS, SCSS, and JavaScript files.
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
Each design has its own scale. It applies to elements size and like thickness. Now,…
This website uses cookies.