The Anatomy of a Grid

Web apps and websites of all kinds have dramatically improved thanks to frameworks that incorporate strong grid principles like bootstrap, foundation, skeleton, etc.

Responsive web design brings a new appreciation of the grid’s role in digital experiences. No longer can designers and developers build for a single screen. The multi-device landscape forces the creator to think in terms of dynamic grid systems instead of fixed width.

Digital design is still in its adolescence and grid usage is still young. Designers and developers should look to the past to bring digital design into the future. It has been over 500 years since the printing press was invented and nearly 300 since the industrial revolution. The grid has been through many design movements, approaches, and refinements. Despite this history, the grid is still in its infancy in interaction design.

Below are the different elements that compose a grid. Some of the terminology has been adopted by the digital design community and some has not. There are obvious reasons why some terms from print media shouldn’t be incorporated into interaction design, but these terms should be considered as we build our new interactive vernacular.

Columns

The Anatomy of a Grid
Columns

Columns are the vertical sections of a grid. The more columns in the grid the greater its flexibility.



Rows

The Anatomy of a Grid
Rows

Rows are the horizontal sections of a grid. They are often omitted in web design. Grids with rows and columns are called modular grids.



Modules

The Anatomy of a Grid
Modules

Modules are units of space that are created by the intersection of rows and columns.



Regions

The Anatomy of a Grid
Regions

Regions are groupings of columns, rows, or modules that form an element of a composition.



Gutters

The Anatomy of a Grid
Gutters

Columns and rows are divided by gutters. The tighter the gutter, the more visual tension is created. Grids with wide gutters produce calming layouts because the elements of the composition have less tension between them.



Margins

The Anatomy of a Grid
Margins

Margins are the space outside of the grid columns and rows. Not to be confused with padding, which is the space within rows and columns.



Flowline

The Anatomy of a Grid
Flowline

Flowlines are typically used to break up sections of a composition. They create natural stopping and starting places in the design.



Marker

The Anatomy of a Grid
Marker

A marker is the area that secondary content is placed. Books commonly house chapter titles, page numbers, etc. in the marker area.



Grid Types


Hierarchical

The Anatomy of a Grid
Hierarchical Grid

The hierarchical grid is an intuitively constructed grid that focuses on the proportions of the elements in the design. This type of grid is often used when the content isn’t standardized and repetitive.



Manuscript

The Anatomy of a Grid
Manuscript Grid

The manuscript grid is the oldest type of grid used in print media. It typically presents itself as a standardized rectangle that contains the content on a page or screen.



Column

The Anatomy of a Grid
Column Grid

The column grid is by far the most used grid in web design because the width of a screen is finite, unlike the height, which can go on forever if the user has the ability to scroll. Most column grids used on the web are 12 columns, but that shouldn’t stop designers and developers from exploring alternatives.



Modular

The Anatomy of a Grid
ModularGrid

The modular grid is devised by overlapping rows and column that form modules. The modular grid is the most complex type of grid. It should be used when vertical and horizontal space are of equal concerns. This type of grid is becoming more popular in digital media with the onset of wearable devices that rely on ‘cards’ to communicate.

Note: We would like to thank Andrew for contributing to our blog with his article.

Andrew Coyle

Designing the future of global trade @Flexport. Follow on Twitter. andrewcoyle.com