Another type of grid system,
besides a column-based grid system, is a modular grid system.
In a modular grid system, in addition to the vertical divisions of space,
there is a horizontal division of space.
Let's look at some examples of modular grids to see how they work.
The Lynda.com app is built on a modular grid.
You can see, it is four modules wide, and every module has the same depth.
Because of the screen ratio for the videos, all modules are horizontal.
Featured courses occupy four module units, so
they keep the same horizontal proportions.
Modular grids work particularly well to organize content for websites.
In the website for Yellowstone Park you see how the modules are all equal and
all equally spaced, connected modules for text and images.
This is a fun food site called mouth.com, that is built on equal modules.
There are many different products, all different shapes and
sizes, so organizing them in a grid makes it manageable for
the viewer to take it in without feeling overwhelmed.
The column at the left has links to articles about vendors, social media.
And a secondary level of modules called Mouthstagram, which links to Instagram.
It all feels very organized.
Here's a great poster infographic, designed by one of my students,
showing the steps he followed in building his own PC.
It's a grid of four units across and four units down.
The computer in the center occupies four modules.
I gave him an A, by the way.
Modules can be very useful in organizing infographics.
This page looks exciting, yet organized, because it makes playful use of
the modules, combining them both vertically and horizontally.
These bite-sized pieces invite the reader into the content because they
offer a quick and easy hit of information in each modular component.
A modular grid provides a structure for the steps in this yoga instruction chart.
There is a set of modules for the icons, and the descriptions of the poses.
Each module within the set has the identical horizontal and vertical
dimensions, even though the number of words in each module is different.
They have been sized to accommodate the longest and
shortest descriptions with a comfortable margin of space.
One last example.
Here's a fine use of modules, combining images and
text from the documentary app, Spies of Mississippi.
There are four equal vertical modules, and four horizontal modules.
The text boxes are all the same proportion.
Think about whether a grid, composed of modules, can work well to organize and
give structure and rhythm to your project.
As always, your content should be the starting point when you
are considering how grids can work best for you