Professional Documents
Culture Documents
(https://www.visme.co/jobs/)
(https://www.visme.co/)
DESIGN INSPIRATION
https://visme.co/blog/layout-design/ 1/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Written by:
Orana Velarde
The secret to any good design lies in the way its visual elements are organized and positioned in relation to each other. This is exactly
what layout design is all about.
Layout gives meaning to your design and makes it look visually appealing. It helps maintain balance from page to page or slide to slide.
An important component of layout design are grids. Grids are the backbone of all layouts, infographics and presentations. When you are
designing on an online editor like Visme (https://www.visme.co/), you are using grids without even knowing it. Our in-house designers
use grids to create the templates you love.
Layout design involves using one grid or a group of grids, depending on what needs to be achieved. Believe it or not, grids also exist to
help you break the rules.
Let’s look at all the kinds of grids that exist in the layout design toolkit, starting with the anatomy of grids so you can better understand
them.
RELATED:
A Visual Guide to the Anatomy of Typography [Infographic] (https://visme.co/blog/type-anatomy/)
Read more
https://visme.co/blog/layout-design/ 2/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
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.
You might recognize many of these terms from document creation programs like Microsoft Word, Google Docs or Pages. The way your
document looks is de ned by these sections of a grid, including the margins, the header, the footer and page numbers.
Format
The format is the full area where the nal design will be laid out. In print design, the format is the page and in web design the format is
the browser window.
https://visme.co/blog/layout-design/ 3/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Margin
Margins are the empty spaces between the edges of the format and the content. The size of the margins is what gives the content a
general shape, usually a rectangle.
https://visme.co/blog/layout-design/ 4/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 5/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Flowlines
Flowlines are horizontal lines that separate the different sections of a grid into parallel bands. They help the reader follow the content of
the layout. Flowlines also create stopping points, or edges for the elements to be placed on. Some owlines are called hang lines and
others are called baselines.
https://visme.co/blog/layout-design/ 6/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Modules
Modules are the building blocks of any grid. They are the spaces created between the owlines and vertical lines. Vertical groups of
modules together create columns. Horizontal groups create rows.
https://visme.co/blog/layout-design/ 7/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Groups of adjacent modules in vertical and horizontal areas create spatial zones or regions. A vertical region can hold a block of text, a
horizontal region can hold a video. Regions can be organized proportionally or used to create overlapping zones.
https://visme.co/blog/layout-design/ 8/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Columns
Columns are vertical spatial zones or regions that t fully from the top to the bottom margin.
https://visme.co/blog/layout-design/ 9/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Rows
Rows are horizontal spatial zones that t fully from the left to right margin.
https://visme.co/blog/layout-design/ 10/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Gutters
The spaces between rows and columns are called gutters. These should always be equal between columns or rows, in order to maintain a
visual balance.
https://visme.co/blog/layout-design/ 11/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Markers
Markers are areas inside the running header or footer that mark the exact place where repeating information is placed from page to
page.
https://visme.co/blog/layout-design/ 12/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Types of Grids
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. Word documents, for example, have a grid, they just aren’t always visible. Layout grids help designers position
text and images in a way that looks coherent and easy to follow.
Now Available: Become a Certi ed Presentation Expert for Free
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
https://visme.co/blog/layout-design/ 13/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Most layout editors, online or otherwise, have a tool called “snap to grid.” These are blue or red lines that show up when elements are
being moved inside the design. They let the designers know when the edges are lining up according to the grid or when it’s centered.
More complex layout editors will show the distance between elements so that they can be positioned proportionately.
RELATED:
11 Rules of Composition for Non-Designers (https://visme.co/blog/composition-rules-for-non-designers/)
Read more
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.
Let’s look at ve kinds of layout grids; manuscript, column, baseline, modular and hierarchical.
Manuscript Grids are used in documents, ebooks, pdfs and presentations with lots of text.
Column Grids are used for magazines to organize content in columns so it is easier to read.
Baseline Grids are a bit more technical and are de ned by the line in which the text sits. This grid creates a good reading rhythm for
any design with lots of text.
Modular grids are like a checkerboard that can display many things for easy access.
Hierarchical grids are mostly used on websites, organizing content according to their importance.
https://visme.co/blog/layout-design/ 14/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 15/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Manuscript Grid
A Word document or a presentation template will always have a manuscript grid. Sometimes these grids are invisible, although they can
be toggled to show up on documents editors like Word. Manuscript grids in a text document separate the header, the footer and the
space on the edges (margins). The manuscript layout creates a rectangle inside the page (format), like a bounding box for text.
https://visme.co/blog/layout-design/ 16/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 17/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
The Manuscript Grid is the foundation for all magazine, newspaper, ebook and all text-based design. The manuscript grid layout design
(https://slickdocs.com/?locale=en) is set up on the rst page. The rest of the pages will follow the same measurements. It’s good practice
to keep the manuscript grid consistent inside one document design. Even if there are elements bleeding off the edge, like a shape or a
photograph, the grid will still be there to help keep a good balance for the entire design.
https://visme.co/blog/layout-design/ 18/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 19/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
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.
Column grids can have as little as two columns or as many as six or more, but that is not very common.
Text and images in a column grid are placed following the vertical lines and owlines that make up the columns. Images can be placed
inside one column, or across two or more to create a different visual layout. The spacing between columns (gutters) should be
proportional and consistent throughout the entire document.
Now Available: Become a Certi ed Presentation Expert for Free
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
https://visme.co/blog/layout-design/ 20/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
A symmetric column grid has all columns the same width, while an asymmetric grid will have some columns proportionally thinner or
wider than others.
Printed newspapers usually use a symmetric column grid to organize their stories.
https://visme.co/blog/layout-design/ 21/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 22/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
A great example of an asymmetric column grid is the general layout of a blog post (beneath the header). If you look at a this example blog
post (https://my.studiopress.com/themes/foodie/) below, you can easily see that it is made up of two columns of different widths: the
blog post content and the sidebar.
https://visme.co/blog/layout-design/ 23/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 24/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
The magazine example below uses a three column grid with proportional widths. The title and subtitle take up the space of all three
columns while some highlighted text takes up the space of two columns.
https://visme.co/blog/layout-design/ 25/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 26/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 27/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 28/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 29/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
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.
https://visme.co/blog/layout-design/ 31/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 32/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Modular grids are also great for laying out forms, charts and schedules. They are also used a lot in e-commerce websites. Your phone
homepage that shows all the apps, has a modular grid. Instagram also uses a modular grid to show your feed.
https://visme.co/blog/layout-design/ 33/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 34/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 35/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Baseline Grid
A baseline is the line where text sits. Leading is the spacing between baselines. A baseline grid can be applied to any of the grids
mentioned above. Using a baseline grid will give a owing rhythm to the text. It will also give the headings and subheadings a
proportional space in relation to the body text, making them more pleasing to the reader.
https://visme.co/blog/layout-design/ 36/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 37/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
There is a baseline grid in something you used a lot during school and might still be using now. Lined notebooks have a baseline grid. It’s
no wonder teachers always wanted us to write on notebook paper instead of white paper. It kept a good rhythm in our written
assignments. Unless of course our handwriting was really tiny or really huge, and then the rhythm went out the door.
If you look closely at this piece of written notebook paper you will see that it also has a document grid that creates margins. Grids are
pretty much everywhere that text and images are laid out on. Why not challenge yourself to nd them?
https://visme.co/blog/layout-design/ 38/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Now Available: Become a Certi ed Presentation Expert for Free
https://visme.co/blog/layout-design/ 39/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Hierarchical grids are mostly used in web design. The purpose of a hierarchical grid design is to organize elements in order of
importance. It is still called a grid because the modules are still set up inside a measured manuscript grid.
A hierarchical grid can be set up freestyle, or with a modular grid as a guide. Having the knowledge to set up a balanced hierarchical grid
without a guiding modular grid, takes years of practice. This is why designers create website templates for non-designers to simply place
their information in. Even seasoned designers use already built templates to save precious time.
In their move to digital platforms, newspapers moved from the usual symmetric column grids to hierarchy grids with columns inside the
spatial zones.
https://visme.co/blog/layout-design/ 40/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 41/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
The designer then set up their layout on top. Images were drawn as rectangles or squares with two criss-cross lines from corner to corner.
Computer based layout editors mirror the layout grid design practices from years ago. Blue ink was used because it didn’t show up on the pre-print
lms.
https://visme.co/blog/layout-design/ 42/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 43/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 44/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Create beautiful visuals for your website with this drag-and-drop tool!
It depends on the kind of website that is being designed. For example, an online magazine or blog might use an hierarchical design on its
homepage, showcasing articles in different sizes. Using headlines in different font sizes as well. E-commerce websites use landing pages
that have one or two calls to action and those need to be the most noticeable.
RELATED:
Now Available: Become a Certi ed Presentation Expert for Free
16 Web Design Trends to Watch Out For (https://visme.co/blog/web-design-trends-2017/)
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
Read more
https://visme.co/blog/layout-design/ 45/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Hierarchical grids are the most unnoticed of all the grids. Their purpose is to call attention to speci c elements and they do that without
the viewer knowing that that it has been done on purpose. A good hierarchical layout can get you better conversions!
https://visme.co/blog/layout-design/ 46/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 47/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Composition Grids
The Rule of Thirds
Now Available: Become a Certi ed Presentation Expert for Free
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
https://visme.co/blog/layout-design/ 48/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
This is a composition grid that separates any space into a grid of nine equal spaces. This grid system can be vertical or horizontal but all
the nine spaces always have to be the exact same size. The elements in the design are positioned in two ways. Focus points are placed
according to where the lines cross from top left, top right, bottom left and then bottom right. Other important elements, usually body
text, is placed inside the spaces created by the intersecting lines.
The Rule of Thirds is believed to create a pleasing composition for the viewer. By following the Rule of Thirds grid, you are making sure
that your design is balanced and proportional. It is used in graphic design and also in photography.
https://visme.co/blog/layout-design/ 49/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
The Golden Ratio is also called the Golden Spiral or Golden Mean. It is a phenomenon of composition found in nature that is also applied
to design. Many famous logos were created using the Golden Ratio and it is very commonly used in photography as well.
The Golden Ratio is closely related to the Fibonacci sequence. This mathematical equation rules the measurement of the Golden
Rectangle, a shape that is perfectly balanced. Using the Golden Ratio or a group of Golden Rectangles in your designs will follow the
ancient composition of nature.
https://visme.co/blog/layout-design/ 50/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Composite Grids
Now Available: Become a Certi ed Presentation Expert for Free
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
https://visme.co/blog/layout-design/ 51/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
When designers use grids they do not always stick to the basics. Mixing grids is a common way of making layout design more creative
and appealing. A multi page document will follow the same measurements of the manuscript grid but will have different grids for
different parts of the formats.
Take a look at what a magazine layout looks like when the pages are opened and set up side by side. Notice the spaces that maintain the
same proportion from page to page and the others that are different on every page. Using composite grids in a creative way will make
your designs more pleasant. This mastery takes a lot of practice!
https://visme.co/blog/layout-design/ 52/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
This example of the page by page layout of an entire magazine template from graphic river is a great example of a composite grid. Every
page is different yet every page keeps a basic grid. You can notice it in the footer and page number and the centering of the columns and
elements.
https://visme.co/blog/layout-design/ 53/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Templates exist to save you (and your designer) precious grid-building time. You can be sure that most of the templates inside the Visme
editor were created on a grid. The ones that were not, were created by designers who have grids ingrained in their vision after years of
practice. You can toggle the “snap to grid” option in the view options of the Visme editor (https://www.visme.co/).
https://visme.co/blog/layout-design/ 54/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
(https://www.visme.co/?
utm_source=BlogCTA&utm_medium=BlogCTA&vc=BottomBanner-
CTA)
https://visme.co/blog/layout-design/ 55/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Thanks,
Reply
(https://visme.co/blog/layout-
design/?
replytocom=60248#respond)
Barbara says:
February 4, 2019 at 4:48 pm (https://visme.co/blog/layout-design/#comment-83215)
Great article! The best examples I have seen so far about grids in magazine use and I
have looked at lot of them!
Reply
(https://visme.co/blog/layout-
design/?
replytocom=83215#respond)
Reply
https://visme.co/blog/layout-design/ 56/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
design/?
replytocom=83216#respond)
Reply
(https://visme.co/blog/layout-
design/?
replytocom=83622#respond)
limo He says:
April 19, 2019 at 8:05 am (https://visme.co/blog/layout-design/#comment-90116)
Great article! I learned a lot from this article and improved after reading your article,
Can I translate it into Chinese to share with my friends? I will attach the original
author and link, hope to get your approval.
Thank you!
Reply
(https://visme.co/blog/layout-
design/?
replytocom=90116#respond)
Reply
(https://visme.co/blog/layout-
Now Available: Become a Certi ed Presentation Expert for Free
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
https://visme.co/blog/layout-design/ 57/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
design/?
replytocom=90487#respond)
Patrícia says:
May 14, 2019 at 4:29 pm (https://visme.co/blog/layout-design/#comment-92614)
Gostei imenso de tudo o que li, artigos bastantes esclarecedores… Continue com este
trabalho , está ótimo !
Reply
(https://visme.co/blog/layout-
design/?
replytocom=92614#respond)
Reply
(https://visme.co/blog/layout-
design/?
replytocom=93345#respond)
Reply
(https://visme.co/blog/layout-
design/?
replytocom=109379#respond)
Fonny says:
September 4, 2020
Nowat 5:10 am (https://visme.co/blog/layout-design/#comment-130972)
Available: Become a Certi ed Presentation Expert for Free
what about compound grid ??
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
https://visme.co/blog/layout-design/ 58/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Reply
(https://visme.co/blog/layout-
design/?
replytocom=130972#respond)
Holly says:
September 23, 2020 at 12:51 pm (https://visme.co/blog/layout-design/#comment-132884)
Wonderful article! It was informative and educational. Thank you for addressing the
basics in layout design for beginners.
Reply
(https://visme.co/blog/layout-
design/?
replytocom=132884#respond)
Leave a Reply
Your email address will not be published. Required fields are marked *
Comment
Name *
Email *
Now Available: Become a Certi ed Presentation Expert for Free
Website
Take the Course (https://www.visme.co/certi cations/memorable-visual-presentations/?vc=hello-bar-CTA)
https://visme.co/blog/layout-design/ 59/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Save my name, email, and website in this browser for the next time I comment.
Post Comment
Canva vs Photoshop: Best Design Tool for 11 PicMonkey Alternatives for Image Editing
Non-Designers (2021) [Free & Paid]
(https://visme.co/blog/canva-vs-photoshop/) (https://visme.co/blog/picmonkey-alternatives/)
https://visme.co/blog/layout-design/ 60/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
Load More
(https://www.visme.co/blog)
COMPANY
CREATE
USE CASES
LEARN
SUPPORT
https://visme.co/blog/layout-design/ 61/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
How IBM Uses Infographics to Attract and Hire Top Talent [Case Study]
(https://www.capterra.com/p/153139/Visme/) (https://www.g2.com/products/visme/reviews)
Copyright 2021 Easy WebContent, Inc. (DBA Visme). All rights reserved. Proudly made in Maryland.
https://visme.co/blog/layout-design/ 62/63
22/5/2021 Layout Design: Types of Grids for Creating Professional-Looking Designs
https://visme.co/blog/layout-design/ 63/63