Using the 5 types of grids to build intuitive UIs

Editor’s note: This article was updated on 3 December 2024.

Different types of grids have been used in UI/UX design for centuries. They make design layouts not only functional, orderly, and stable but also visually appealing. And given that they can be adapted to various screen sizes, such as for mobile devices, grids have become essential tools for modern web designers.

There are several types of grid systems that are commonly used in web design:

• Column grids — For when you have to divide content into sections
• Modular grids — Useful if you need a grid with uniform rows and columns in a complex design
• Hierarchical grids — Perfect for unique and asymmetrical designs
• Baseline grids — Focus on typography and alignment of text
• Manuscript grids — Used for layouts that are dominated by large blocks of text

In this blog, I’ll talk about each of these in detail. I’ll also discuss where we can see these grids in modern designs and how you can use all of this theory to design for the modern user.

What is a grid system?

A grid system is a structure made of intersecting horizontal and vertical lines that helps organize a design layout.

We see examples of grid systems practically everywhere — in print, on websites, and on mobile apps. Social media apps like Instagram also rely on grids. The main feed uses a column layout to showcase images, while the profile view adopts a modular grid to organize posts in neat rows and columns, making them easy to scan. Even survey forms use grids.

In UI/UX design, specifically, grids serve to organize content, making layouts cleaner, more consistent, and visually appealing:

Grids enable UX designers to control the position of elements on a page and make user interfaces more intuitive to navigate.

Glossary of terms: Elements of a grid system

• Format — The format is the overall size and shape of your design space; basically, the canvas you’re working with. Think of it as the boundary where all your grid lies
• Columns — Columns are the vertical sections in your grid. They’re the go-to for organizing content into neat, digestible chunks, whether you’re lining up text, images, or both
• Rows — Rows are the horizontal counterparts to columns, helping you structure content from top to bottom
• Flowlines — Flowlines are horizontal lines that run across your grid, helping to align content and create visual breaks. They’re like little guide rails to keep your layout neat
• Modules — Modules are the building blocks of a grid; they’re the tiny rectangles where rows and columns intersect
• Spatial zones — Spatial zones are clusters of modules that group content with a shared purpose. For example, you might have one zone for images and another for text
• Gutters — Gutters are the spaces between columns or rows. They keep everything from feeling squished together and give your design some breathing room
• Margins — Margins are the empty spaces around the edges of your grid
• Markers — Markers are the little reference points in your grid, helping you align key elements consistently

What are the five types of grids?

I’ve mentioned before how grids form the very foundation of a good UI/UX design. They provide structure to chaotic UX. And they ensure your users feel a consistent rhythm across interfaces so they can navigate content intuitively. I’ll now talk about the different types of grids.

Your choice of grid type will depend on the goals of the project, the content the UX needs to accommodate, and the interaction patterns you seek to encourage.

Like I mentioned before, there are five key types of grids — column grids, modular grids, hierarchical ones, baseline grids, and manuscript grids. Each of these types of grids works for different sorts of use cases and design goals. Let’s get into those details now:

Column grids

The column grid system consists of a set number of vertical rectangular fields separated by consistent gutters. They divide a layout into sections and ensure a clear visual hierarchy.

In my experience as a UX researcher, I’ve found that these column grids work best for structuring content-heavy designs, maintaining a clean and organized web layout, and enhancing the responsiveness and readability of a design across devices.

Column types of grids excel particularly well for use cases like:

• A responsive website that needs its columns to adjust to a different screen size
• An e-commerce product page that shows products in a grid format
• Any magazine-style layouts that have text and images

Modular grids

Modular types of grids are an evolution of column grids. Column grids were all columns — modular grids add horizontal rows to the columns. So, with a modular grid system, you end up with modules where the columns and rows intersect.

A seasoned UX designer would recognize how well modular grids would work for designs that require flexibility in content placement. Modular grids work well when you need to balance text, imagery, and interactive elements. Ooh, and they also work well to create reusable layouts within a design system.

The most common use cases for modular grids are:

• Data-heavy interfaces and dashboard designs where each module could represent a data card
• Design systems for apps and website
• Marketing pages that are module-based

Hierarchical grids

Think of the Swiss-style designs that I talked of before. Those are all hierarchical grids — they’re freeform grids that don’t follow strict rows and columns.

In the hierarchical grid system, we don’t see equal spaces between the modules. They adapt to content needs, and so they allow for more flexibility and variety.

I’ve noted that these grids are used most commonly to highlight the primary and secondary elements in designs, especially for asymmetrical and creative layouts. The fact that these grids focus on elements over uniformity means that they can help build unique visual narratives.

I believe hierarchical grids work best when you have to:

• Design a dynamic landing page with, say, an oversized hero image and a unique layout that needs to draw attention to the calls-to-action
• Build a creative showcase or portfolio where content varies in size and importance

Baseline grids

Baseline grids are for those who love typographic harmony. These types of grids focus on aligning the textual and typographic elements in a design to a uniform baseline — so there’s perfect vertical rhythm.

So, if your UI/UX content goal is to maintain a polished and professional visual appearance with perfect text readability and consistency in a typography-heavy layout, you’ll use baseline grids.

When I think of baseline grids, I think of a blog post layout where all text aligns with a baseline grid — and all headers, paragraphs, and captions are uniformly spaced.

The most common use cases for baseline grids would, then, be:

• Long-form content types, like blogs or news articles
• Designs for text-heavy apps like e-readers or document editors

Manuscript grids

Manuscript grids are the simplest of all types of grids. They’re also sometimes known as block grids. They’re the default for all straightforward designs — they’re composed of one single rectangular column grid or multiple grids arranged vertically.

These ones are best for designs that are text-driven and have few visual elements. So, if readability is paramount in a design project, you’d want to follow a manuscript grid.

I see these manuscript grids working best for, say:

• E-book layouts or academic papers
• Super long-form articles or reports
• Minimalism-focused portfolio designs

Best practices for using grids in UI/UX design

It’s apparent by now that grids provide structure, consistency, and an intuitive UI. But only when they’re used properly. In this section, I’ll talk about how you can best make grids work for you to design websites, mobile apps, and ecommerce products.

Using grids for websites

Your company’s website is a user’s first interaction with your brand, so there’s no negotiation about getting the design right.

For websites, specifically, I recommend using a modular grid system. That would reduce the chance of random design choices and help align elements — so you achieve an aesthetically pleasing result. To make the most of it:

• Follow the rule of thirds — Divide a design area into thirds vertically and horizontally, so you end up with nine equal sections (a 3×3 grid). By placing key elements at the intersections, a potential customer will naturally be guided to areas of interest

• Honor the golden ratio — Use a ratio of 1.818:1 when designing column widths or aligning content. When you get this math right, you’ll create proportional grids that feel just right to users. For example, pair a 100px column width with a 161.8px length. Your layout will be innately pleasing

• Don’t be afraid of white space — Allowing white space in your design leaves some breathing room that’ll improve readability and help your users focus. Following an 8x9pt grid (the material design method) can help determine adequate spacing for that clutter-free UX
• Design dynamically — Walt Disney asked us all to keep up with the latest technologies. And for today’s multi-device world, a responsive design is a must. Using a responsive grid would mean that your web design looks great on all devices. Tools like CSS Grid or Bootstrap can simplify this process

Using grids for mobile apps

When designing for mobile, don’t forget your brainstorming hat at the door. Responsiveness and empathy are critical for mobile devices. But you have grids to help ensure you have a functional layout, even on the smallest screens.

Here’s the down-low on designing a grid for an app:

• Know your screen sizes — Start with the baseline screen resolutions: 1440×1024 for desktops, 768×1024 for tablets, and 320×640 for mobiles. Adopting your designs to these dimensions would ensure your app feels intuitive on every device
• Choose the right count of columns — The twelve-column grid is standard, but mobile screens might require fewer columns. Use a four- or six-layout for smaller screens, which will keep gutter widths consistent and bring in visual balance
• Test, refine, repeat — The work of a designer doesn’t stop once the app has been released. Once your app is live, keep using usability testing and iterating on user feedback. For example, if users ignore a particular button or struggle to find a feature, you know you need to adjust your layout

Using grids to design ecommerce products

When designing for ecommerce, using a mobile-friendly, responsive design is critical for conversion. A modular grid will come in handy when you need to guide users from discovery to purchase.

Here are some tips that’ll help your ecommerce design stand out:

• Ditch the slideshow — Studies show that users tend to skip over carousel banners and instead scroll down to the content below. So try to organize your featured products into grids of three or four columns, so users can quickly scan through
• Use high-quality images — High-resolution images are a signal of professionalism and help build trust. Using bigger, high-quality images that users can easily spot when they’re scanning for a product will help conversions
• And again, use a mobile-responsive grid — People shop on their phones more than ever before. Modular grids will help your layouts adapt to different screen sizes

Designing for the modern user

When designing for the modern user, you have to balance function, style, and usability. But then, how do you make sure your design works across devices and resolutions and is clean and purposeful?

Below are some ways in which using the various types of grids mentioned in this post can help ensure your designs are fresh and intuitive for your users.

Design collaboratively

When you’ve just begun designing your grid layout and product interface, use tools that allow your team to work collaboratively.

Grids are your design foundation, and having a strong foundation will minimize rework. Using ideas from everyone on your team will help save time and keep the design cohesive from the ground up.

Sketch a wireframe first

There are so many types of grids, and it’s entirely okay to not be sure of which one among the types of grids to pick. I recommend that you start by sketching out your ideas. Think along the lines of:

• How many columns should there be?
• Are the spacing and lines between the grids, gutters, and margins equal?
• How does the grid relate to the format?
• Is my design creating impact or noise?

Use answers to these questions to sketch out a wireframe first. Throw your idea of what you want the end product to look like on paper. And when placing the content on your page, consider adding more visual weight to what’s more important. Stretch that design component across multiple modules, giving it a bigger presence.

And never end a design element in the gutter.

Incorporate usability testing

No design is perfect without testing.

Toyota encouraged workers to pull a cord to stop the assembly line if they had an idea that would improve the existing processes. In the same way, usability testing lets you gather real feedback on how users interact with your product.

With usability testing, your key objectives should be to understand:

• How easily can this process be navigated?
• Is the user able to navigate the process successfully?
• How well did the user navigate the process?
• Are there issues? If so, what is the severity of the issues?
• Does the user feel good about the process?
• Is there a way to do it better?

Without usability testing, even the best grid can’t guarantee success.

So, what grid system will you implement in your next design?

The possibilities are endless, but with the right approach, you’re sure to create something both beautiful and functional!

FAQs about using grids in UX/UI design

What are the five types of grids?

The five types of grids are:

• Column grids (vertical sections)
• Modular grids (rows + columns = boxes)
• Manuscript grids (simple, single blocks for text-heavy layouts)
• Hierarchical grids (guides based on content importance
• Baseline grids (for perfect text alignment)

What are examples of grid systems?

A few examples of grid systems include:

• Bootstrap grid — A 12-column layout for responsive websites
• CSS grid layout — Allows precise placement of elements on a page
• Material design grid — A 4dp baseline grid for consistency in Google’s design system

Why use grids in UX design?

Grids keep things organized and easy to navigate. They help layouts feel balanced and make sure content flows in a way that’s super user-friendly.

What is a modular grid in UX?

A modular grid is a system of rows and columns forming evenly spaced blocks or modules. It’s commonly used for complex layouts like dashboards, ecommerce sites, or data-heavy pages.