How to Use the Grid System in Graphic Design GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Software & Apps > Design
Using the Grid System in Graphic Design
Keep designs consistent with grids
By Eric Miller Eric Miller Writer New York University Eric Miller is a former Lifewire writer, freelance graphic designer, and owner of a web development and graphic design studio established in 1998. lifewire's editorial guidelines Updated on April 10, 2020 Tweet Share Email Tweet Share Email Design Graphic Design Photoshop Animation & Video 3D Design The grid system used in the graphic design process is a way of organizing content on a page. It uses any combination of margins, guides, rows, and columns to form a uniform arrangement. It is most apparent in newspaper and magazine layouts with columns of text and images, though designers use it in many other projects, too. When you learn how to recognize the grid, you'll notice it everywhere in advertising, websites, packaging, and more. Using Grids in Your Designs
A grid system can be a single grid or a collection of grids. Some are standard to the industry; others are free-form and up to the designer. In a finished product, the grid is invisible, but following it helps to create effective, aesthetically pleasing print and web layouts. For example, when designing the back of a postcard, you will use the U.S. Post Office's standard grid. A section of the right side is designated for the address, and the stamp must be in the upper right of this space. You must leave white space along the bottom where the USPS will place their barcode system. This leaves you with a small section on the left for your design and text. The grid units are where you place text and graphics. Margins, alleys, and gutters are usually blank space within the grid. Jacci Howard Bear Websites and brochures typically follow a few standard grid systems that form the basis for templates. One of the most popular for both projects is the header and three-column layout. It is very familiar to the viewer and can be an easy way to get a jumpstart on your design. Jeremy Girard When designing websites or multi-page print material, consider keeping a collection of grids to work with. Each grid in a given design should be related, but they can be different. This allows you to adapt the information for one page into a more suitable layout without compromising the consistent look and feel a great design requires. Types of Grids
Grid layouts are as varied as the publications, sites, and items they govern. Common types include equally sized two-, three-, and four-column grids with a header across the top, as well as full-page grids of squares. From these building blocks, the variations of column widths, borders, page sizes, and other features create unique page designs. When starting a project or even just practicing, try using a grid system to help position the elements of your design on the page. Most graphic design apps and programs offer the option to use grid overlays as guides for content placement. Breaking Out of the Grid
Once the grid is established, it is up to the designer as to when and how to break out of it. This doesn't mean ignoring the grid; rather, elements might cross over from column to column, extend to the end of the page, or extend onto adjacent pages. In fact, starting with a grid and then breaking out of it can lead to interesting page designs. This is a common approach in modern magazine design. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire How to Use Canva Task Manager (What It Is & How to Use It) How to Make a Calendar In Excel The Top 10 Personalized Start Pages for Your Web Browser How to Use Basic Shapes in Graphic Design Balance: the Basic Principles of Design How to Limit Rows and Columns in an Excel Worksheet Direction: Basic Element of Design How to Use Columns in Apple iWork Pages How to Use the iPhone Camera How to Wrap Text in Google Sheets How to Use Grid View on FaceTime in iOS 15 How to Use the Excel INDEX Function Working in Advertising as a Graphic Designer An Introduction to Graphic Design Top 4 Windows Web Editing Suites Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies