Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Choosing The Right Grids

Although by definition, the term grid implies a strictly square-based structure, there are also many sub-types of grids, each with their unique use cases in web design. Without even knowing it, your design choices up until now, such as the placement or width of your website content, could have easily been following a grid-layout mindset without you even realizing it.

In this lesson, we will review the different types of grids and the type of sites they are best suited for.

Single Column (Block) Grid: A Classic Option for Single Posts and Articles

Block grids can also be referred to as single-column grids or manuscript grids, and are considered to be the simplest grid structure.

Block grids consist of a single column and can either include one single element or multiple elements arranged vertically, surrounded by margins.

Block grids are often used for extensive or continuous blocks of text, and can often be found in blog pages or posts. Another instance where you may encounter block grids is large, full-width images, such as cover images or hero images.

One of the most common use-cases we’ve seen for block grid layout is primarily for article or single blog posts.

A key reason why block grids are such a perfect match for article pages and general single posts is because they embrace the linearity involved in reading a story. When your aim is for website visitors to relish in your website content, the more you facilitate a vertical, focused reading experience, the more likely they are to embrace your content.

Column Grid: Divided Yet Equal

Column grids are composed of several columns, mostly used to organize multiple elements into columns. Column grids can have as little as two columns, with no real limit to how many there can be. That being said, the standard grid layouts in web design consist of six, nine, or 12 columns. But it’s really up to the designer to decide how many columns they find necessary.

Once placed inside a column grid, text and images follow the alignment of the columns’ vertical lines and flowlines. Design elements can be placed inside one column, or across two or more to create a variation of visual layouts.

Spacing between columns (gutters) should be proportional and consistent throughout the entire page. A symmetric column grid has all columns the same width, while an asymmetric grid will have some columns proportionally thinner or wider than others.

Logically, these column-based tables are a direct result of consistent, grid-based infrastructure that caters to 3-4 clear, concise columns with a minimal amount of text. A column-based grid really is the most befitting choice here, as when it comes to writing a pricing page, you want to give each subscription or plan you’re representing as much clarity as possible.

There should be no distractions, no interferences, nothing that takes the reader’s eye away from the essential information.

Modular Grid: Perfect Symmetry

Modular grids are composed of columns as well as rows. They’re often compared to or described as looking like a checkerboard, and can be very effective for presenting many things at once for easy access.

Typically, modular grids are used in web design when there are multiple elements to organize, and a column grid, which only focuses on vertical alignment/organization, won’t suffice. Modular grids get their name from having equally-sized modules (which we discussed earlier). Common use-cases for modular grids are mobile phone home screens that show the full collection of apps, or e-commerce websites that display collections of inventory in their category pages.

Keep in mind that even though the image squares themselves have several lines of text beneath them, this is still a modular grid because each card in its entirety (thumbnail image, title, description, and date) all fit into a uniformly sized rectangle.

Hierarchical Grid: Organized Yet Freestyle

Hierarchical grids, which can also be described as ”freestyle”, are grids whose elements are placed “spontaneously” among the grid’s columns and rows. This means that the column widths and row heights vary throughout the grid.

This example of a fashion photographer’s portfolio site finds a perfect grid match for how to showcase his work: a freestyle grid which welcomes images of all heights. This way, there’s no need to compromise and crop images so that they’ll follow a uniform height. It also keeps things interesting as you scroll through the gallery, as the variety of shapes has an especially dynamic vibe and user flow. Not to mention that if there are certain images that the photographer wants to be more dominant than others in the gallery, he can choose to make those a bigger size than the others, encouraging users to pay more attention to the ones he likes best.

Scroll to Top