Layout Grid Calculator

Layout Grid Calculator

Design your layout grid system for web pages and print design.

Select optionally the common devices page dimension or choose your own one.

Builders and generators

4.5 Share

Common devices dimensions:

Max page width
px
Gutter width
px
Page width
px
Columns
integer
Margin width
px
Column width
px

Grid example

Layout Grid System

One of the easiest ways to achieve an organized design is to apply a grid system.

It’s a tried and tested technique that first found favor in print layout. Low-tech and cheap, this is a great resource for you as a designer – consider it a top-ten tool in your office.

The grid system helps align page elements based on sequenced columns and rows. Designers use this column-based structure to place text, images, and functions in a consistent way throughout the design.

Grids in interactive and web design can also help provide a consistent experience across multiple devices with different screen sizes. Users are happy when they see familiar features laid out as they would expect to find them.

Grids in Interactive Design

In the digital world, the grid system acts similarly to the print layout in organizing the elements on the page. Additionally, it provides a guide for designers to create multiple layouts that support responsive themes for different screen sizes.

We divide the web page layout into columns that we separate with margins, using whitespace, between them. The width of the columns and the margins are equal, and we can place content in one or more columns based on the layout of the design.

The application of a grid means that the design can be divided into multiple columns that can help designers organize content. For example,we can have one, two, three, six, twelve, or more columns.

Today's screen resolutions reach very large sizes compared with what was available in the early days of computers. Even so, using a 960-pixel width can ensure that the design is properly displayed on many computer screens. It can also help designers modify the layout for mobile devices.

Share this Tool

Did you like it? Share it!

Share this tool

Related tools. Try these one!

Generators, builders and validators to improve your SEO and web performances

Home Back to top of the page