The Guide to

Grids Composed by Zain Wirasat

Terminology of Grid
Layout grids are used for design projects that have as little as one page or as many as hundreds. These are
the kind of grids that organize elements inside a space. Layout grids help designers position text and
images in a way that looks coherent and easy to follow. The anatomy of a grid is made up of several parts.
Not every part is present in every grid; it depends on the sort of grid. Here we will look at the most
important parts of a grid.

Flowlines Modules
Flowlines are the lines that Modules are the boxes or areas created by the
run horizontally across the vertical and horizontal lines of a grid.
grid. They help the reader
follow context.

Columns Spatial Zones

Columns run vertically Spatial zones consist of several modules to
downward from the top of the create blocks and content areas to give you a
margin to the bottom. Very guide on placing photos and blocks of text. This
helpful in magazine and can be large or small depending on the content.
editorial layouts to find
placements for paragraphs,
headlines and text. Gutters
Gutters are areas between the columns and
Rows rows. It is nice to keep these the same width
Rows cintain the areas tht run througout to maintain consistency in your
horizontally across the page. design.
ManuScript Grid
(Block Grid / Single Column Grid)
This Grid is great for Books and long continuous placement of text. This is the most basic form of a grid
and found in word processing documents as basic guides for creating margins.
Column Grid
Column grids are used to organize elements into columns. Magazines use column grids to place the text in
easy-to-read sections. Some academic textbooks also use them. Column grids are used inside websites as
well, like in online newspapers or blogs.
Printed newspapers usually use a symmetric column grid to organize their stories.
Hierarchical Grid
These are mostly used for the web, where fixed grid layouts will not work. The purpose of a hierarchical
grid design is to organize elements in order of importance, with the most important items larger and
toward the top and with less important items further below and smaller in size.. It is still called a grid
because the modules are still set up inside a measured manuscript grid. The gutters and margins can
change in size throughout depending on the space of the browser.
Modular Grid
A modular grid is similar to a column grid in that it has columns, but it also has rows. This kind of grid is
used when there are more elements to organize and a column grid isn’t enough. Newspapers use column
and modular grids to organize the stories comfortably and easy to read. Modular grids have equal size
modules. This makes it easier to “break the rules” and use the spatial zones in different ways.
Isometric Grid
The Isometric Grid is an absolute game changer for designs. It enables designers to create work with an
incredible 3D appeal that just makes their work stand out. If you're in the design world, you must know this
tool in and out to leverage that “pop” aesthetic and take your design game to the next level.
Blocking
Create plans for your layout by using grids before any final
photo or text is placed in your design. This is called Blocking.

Icon Grid
Icon grids represent an icon set’s rules visually, laying a
canvas to draw from. They delineate the icon’s dimensions,
the underlying pixel grid, and additional key gridlines — or
keylines — to follow.

Margin Area