(https://www.graphic-design-institute.

com/)

Types Of Grid Systems Useful For

Layout Making By Graphic Designers
 Home (Https://Www.Graphic-Design-Institute.Com) | Blogs (Https://Www.Graphic-Design-Institute.Com/Graphic-
Design-Blogs/) | Visual Grammar (Https://Www.Graphic-Design-Institute.Com/Category/Visual-Grammar/) | Types Of
Grid Systems Useful For Layout Making By Graphic Designers

Save


 December 9, 2014 (https://www.graphic-design-institute.com/visual-grammar/types-grid-system-useful-layout-making/)  Graphic

Design Institute (https://www.graphic-design-institute.com/author/sugandha/)

 Visual Grammar (https://www.graphic-design-institute.com/category/visual-grammar/)  Graphic Design (https://www.graphic-

design-institute.com/tag/graphic-design/)

 0 Comments (https://www.graphic-design-institute.com/visual-grammar/types-grid-system-useful-layout-making/#respond)
One of the easiest ways to achieve an organized design is to apply a grid system. It’s a tried and tested
technique that first found favour in print layout. A Grid represents a framework of spaced bars that are
parallel to or cross one other, a grinding.” Grids in interactive design can also help provide a consistent

experience across multiple devices with different screen sizes.

Typically, a grid is an arrangement of horizontal and vertical lines that are utilized to subdivide a page
vertically and evenly into margins, segment (columns), inter-column spaces, type lines and spaces
between blocks of type & images. These subdivisions lay the basis of a modular & systematic methodology

to the layout, especially for multipage records, making the configuration process faster along with ensuring
visual consistency between related pages.

Essentially grids are of four types, namely:

In the digital world, the grid system acts similarly to the print layout in organizing the elements on the page.
Additionally, it provides a guide for designers to create multiple layouts that support responsive themes for

different screen sizes.

All layout grids can be designed in two ways: symmetric or asymmetric. Symmetric grids follow a center

line. The vertical margins are equal to each other, as are the horizontal ones. Columns in a symmetric
layout are also the same width. In an asymmetric layout, both margins and columns can be different from

one another. It is important to always look for balance when using an asymmetric layout.

1. Manuscript Grid

2. Column Grid

3. Modular Grid
4. Hierarchical Grid

See the below given example of a practical use of grid system in layouting.

Save

Now let us discuss these grid systems in details.

1. Manuscript Grid

Also known as a single column grid or a block grid, the manuscript grid is the easiest grid structure of all. It is
predominantly an extensive rectangular area taking up a large portion of the space inside a format.
 Save

The essential structure is characterized by large text margins and blocks, which position the block inside the
format. Its secondary structure characterizes the area and extents of folios, running headers, footnotes, and

other auxiliary information.

Manuscript grids are useful for broad and continuous blocks of text. They’re utilized as a part of books and

long essays and may give themselves well to blog post. They aren’t restricted to content however. Pictures

can be utilized to fill the block.

Save

In the above example, the website of Oli Studholme is a perfect example of a manuscript grid. Again, what

we see is a large block of text surrounded by margins. They have placed the logo and a single link in the

running header and the date of publication in the left margin.

2. Column Grid

Column grids are made up by setting multiple columns inside the format. Column grids are great when

discontinuous data needs to be exhibited.

 Save

Columns can be dependent on one another, autonomous from one other, and traversed by designing

elements. This prompts a lot of adaptability when arranging information on the page. The width of a column

should rely upon some components internal to the design, probably the size of the text. A column should
have the capacity to oblige a measure for reading and maintain a strategic distance from excessive

hyphenation towards the end of lines. If a column is too narrow or wide, then it’s become difficult to read

them.

Column Gutters

At the point when the margins are more extensive than the gutters between columns the eye is guided

inward & strain is eased. However if the margins are narrower than gutters, the eye is directed outward and

give rise to a complex situation.

There are no hard core rules, but generally if the size of the gutter is taken to be x, then margin is usually set

to be 2x. Moreover follow lines can be utilized in column grids to help set the subordinate structure or to take
into consideration irregular.

Flowlines can be used in column grids to help set the subsidiary format or permitting unusual breaks in
images and text .Hanglines and baselines can help create where diverse elements will be situated vertically

within the columns.

 Save

Above example has used a 12-column grid, which will become clear if you look through its CSS file. On the
home page we see one column used for the publication date, five more for the article title and excerpt, and

then six more for the image on the right.

3. Modular Grid

Modular grids are similar to column grids with the expansion of even divisions marked by rows. The rows

and columns and the gutters between each one form a matrix of cells or modules. Modular grids are great

for hard projects that call for more control than a column grid can offer. Picture galleries and shopping

carts are likely possibility for modular (particular) grids.

 Save

Modular grids give themselves to the design of tabular data, for example, graphs, structures, navigation,

schedules, and of course tables of data. They can help institutionalize the space in tables and help

coordinate tables with any encompassing images or text.

Modules can either be vertical or horizontal and the proportion of a module can be known in various ways

such as average height and width of a paragraph, image size, ad unit size, so on.
 Save

The UX Magazine site is a clear example of a modular grid in action. If you look at the middle of the page the

individual modules are clearly evident as they form an 8 × 7 matrix on the page. Each module is

approximately 120px × 120px with 5px gutters between them. Notice how fields are formed to support
content larger than any of the modules would individually allow. This makes the grid appear less regular

and creates more interesting shapes and patterns within the design.

4. Hierarchical Grids

Hierarchical grids are commonly found on the web. They’re built more with respect to an instinctive position

of elements, which still adjusts to the needs of the data. Customized parts are commonly used as a part of

hierarchical grids instead of frequently repeated intervals. Column widths have a tendency to shift as do

the location of flowlines.

 Save

Hierarchical grids are great when an undertaking requires an odd grid that doesn’t effectively fit one of the

other grid networks and can be utilized to bind together different elements and form a superstructure for
arranging them.
 Save

In the above example, elements on The Swish Life website are tightly aligned, but not with any grid
attempted to overlay on top. Rows of information aren’t divided equally and across these variable rows, the

column widths differ. The above suggests a hierarchical grid, more organic than built on a rigid structure.

Final Words on Grid Systems for Graphic Designers

The 4 grids above are the main types of grids you’ll encounter. Each has a different function as far as

holding content and choosing the right grid to use should come down to the content for your specific

project.

Manuscript grids — are the simplest and they work well when presenting large continuous blocks of text
or images.

Column grids — work well when the information being presented is discontinuous and different types of

information can be placed in different columns.

Modular grids — work best for more complex problems where columns alone don’t offer enough

flexibility. The introduce horizontal spaces between blocks of content.

Hierarchical grids — can be used when none of the above grids will work to solve the problem. They tend

to be created organically by first placing design elements on the page and then finding a rational

structure for presenting those elements.

Hopefully everything above has helped you understand that grids come in different varieties and more

importantly when you might choose one grid type over another. Each can be the appropriate choice for a

website as each allows for variety within the grid. If you currently work with grids which type of grid you use

most frequently?
We have created a very advanced presentation for you so you can read more about Grid Systems in
Graphic Design (http://www.slideshare.net/admecinstitute/grid-systems-in-graphic-design-by-admec-

multimedia-institute) on slideshare

View Full Presentation on slideshare:Grid Systems in Graphic Design

Grid Systems in Graphic Design by ADMEC Multimedia Institute

(http://www.slideshare.net/admecinstitute/grid-systems-in-graphic-design-by-admec-multimedia-
institute) from ADMEC Multimedia Institute (http://www.slideshare.net/admecinstitute)

Share it        

Graphic Design (https://www.graphic-design-institute.com/tag/graphic-design/)

 Our Address
C-9/ 15, Top Floor, Sector- 7,

Rohini, Delhi-110 085, India

Talk To Expert
+91 9911-782-350 (tel:9911782350)

+91 9811-818-122 (tel:9811818122)

Email Us
[email protected]

[email protected]

Our Partners

ADMEC Multimedia Institute (https://www.admecindia.co.in/)

CAD Training Institute (http://www.cadtraininginstitute.com/)

Post Production Institute (http://www.postproductioninstitute.com/)

Video Editing Institute (http://www.videoeditinginstitute.com/)

Web Development Institute (http://www.web-development-institute.com/)

Quick Links

 Adobe Illustrator (https://www.graphic-design-institute.com/category/adobe-illustrator/)

 Adobe InDesign (https://www.graphic-design-institute.com/category/indesign/)

 Adobe Photoshop (https://www.graphic-design-institute.com/category/adobe-photoshop/)

 CorelDraw (https://www.graphic-design-institute.com/category/coreldraw/)

 Others (https://www.graphic-design-institute.com/category/others/)

 Visual Grammar (https://www.graphic-design-institute.com/category/visual-grammar/)

Contact Us

Tags

Adobe Illustrator (https://www.graphic-design-institute.com/tag/adobe-illustrator/) Adobe

Photoshop (https://www.graphic-design-institute.com/tag/adobe-photoshop/) Advertising
Design (https://www.graphic-design-institute.com/tag/advertising-design/) Color in Design
(https://www.graphic-design-institute.com/tag/color-design/) Coreldraw (https://www.graphic-design-
institute.com/tag/coreldraw/) DTP or Desktop Publishing (https://www.graphic-design-

Graphic Design
institute.com/tag/dtp-or-desktop-publishing/)

(https://www.graphic-design-institute.com/tag/graphic-
design/) InDesign (https://www.graphic-design-institute.com/tag/indesign/) Prepress and Postpress (https://www.graphic-design-

institute.com/tag/prepress-and-postpress/) Typography (https://www.graphic-design-

institute.com/tag/typography/) Visual Grammar (https://www.graphic-design-institute.com/tag/visual-grammar/)

Copyright © 2020 Where Students are Achievers (https://www.graphic-design-institute.com). All rights reserved.

About Us (/about-graphic-design-institute/) | Courses (/graphic-design-career-courses/) |

Portfolio (https://www.admecindia.co.in/portfolio/)