4 Types of Grids – Web Design Showcase

Lilian Rigo

14 years ago

Spaced at regular intervals horizontal and vertical lines intersecting and forming certain patterns create a grid. This sophisticated technique originating from print design is now widely applied to web sphere for optimizing website layouts. Using certain combinations of columns, rows, margins, and gutters, a grid organizes content by holding up the elements.

Don’t you ever feel certain strength inherent in a grid-based layout?

There are however many variations of grids; in spite of this designers stick to using some consistent grid systems with stable principles of proportion and balance. They can apply one grid or a fusion of grids may be applied across an entire project to achieve a consistent effect. Most web projects however are based on 4 main grid types.

Manuscript Grid - the simplest grid consisting of a single column or an integrated block of text and imagery surrounded by margins. The architecture of this type reminds of a large rectangular area filling the space inside a format.
Column Grid - used to create vertical zones with columns, which can be reserved for images, captions, or texts. The elements are intentionally placed on a column grid to create a certain effect.
Modular Grid - distinctive in having consistent horizontal and vertical divisions. With modules governing the placement of elements, this type is ideal for complex projects abundant in imagery content.
Hierarchical Grid - usually displays intuitive, spontaneous placement of elements. This is mostly an organic type with customized proportions, different column widths deliberately used to create zones with different kinds of content.

Minutely, these grid types are described in the article 4 types of grids and when each works best from VanSeoDesign, so you might be interested to check it out. Once starting a new grid-based project, you’d better try using such grid systems to help position the elements of your design on the page. Hopefully the following grid type examples will come in really handy when practicing.

Manuscript Grid