The Anatomy of a Grid & Why You Should Use One
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
Columns are the vertical sections of a grid. The more columns in the grid the greater its flexibility.
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
Modules are units of space that are created by the intersection of rows and columns.
Regions
Regions are groupings of columns, rows, or modules that form an element of a composition.
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
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
Flowlines are typically used to break up sections of a composition. They create natural stopping and starting places in the design.
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 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 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 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 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.
