Layout Love: Modular grids for visually appealing layouts

As I’ve said plenty of times before, a well-chosen grid can do much, much more than align content. Our choice of grid can influence how we approach a design and it can change how we think about layout. That’s especially true of modular grids.


First, a quick explanation. There are several components to a grid: columns, fields, flowlines, gutters, margins, modules, and spacial zones. Grid modules are individual units—most commonly rectangles or squares—which repeat horizontally and vertically. Modules can be any size: based on your content, the aspect ratios of images, and even advertising sizes. We don’t hear as much about modular grids for web design as we do column-based grids. I’d like to change that.

Modular grid for website design
Clockwise from top-left: Modular grids with four, five, and six columns, with three or four rows. A spacial zone comprised of six grid modules.

In CSS Grid, spacial zones are called grid-template-areas. Whatever you choose to call them, they’re adjacent modules bound together to form larger areas.


Tip: I wrote about compound grids in more detail in my book “Art Direction for the Web.” Buy the e-book for £12.99.


At first glance, modular grids might seem complicated. However, they’re easy to work with. Modular grids are excellent for bringing order to large amounts of varied content and you can also use them to create visually appealing layouts when there’s very little content. They’re also fabulous for making diverse designs with plenty of drama and energy and can be especially useful for laying out portfolio or product pages.

For these examples, I start with a modular grid comprised of three columns and rows. Each module is a landscape orientation rectangle, but could also be portrait orientation or a square.

This simple modular grid is ideal for making a bold statement, perhaps on a home or landing page, or a product page on an e-commerce website. In this arrangement, the large image in a 2x3 spacial zone adds immediate impact and is complemented by a solid column of running text which fills the height of this layout.

Modular grid for website design
Left: Four-column modular grid with landscape orientation rectangles. Right: A bold statement made with a 2x3 spacial zone containing a large image.

A modular grid offers a huge variety of potential layout options. In this next arrangement, two larger spacial zones—one landscape, the other portrait—offer space for larger images and have been placed alongside a series of smaller images and text blocks of the same size. Not every module in a modular grid needs to be filled with content and here, empty modules add breathing space inside this energetic arrangement.

Modular grid for website design
This arrangement—based on a three-column modular grid—would suit a set of portfolio items or product images.

A carefully considered modular grid can add rhythm to a layout. I might place images and text vertically to emphasise my columns and use each column for a discrete piece of content.

Modular grid for website design
Three sizes of images and text adds rhythm to this arrangement of elements on my modular grid.

Angles can help you make a layout look less structured and feel more organic. I may opt for square spacial zones and mirror them along a diagonal axis.

Modular grid for website design
Although these modules are symmetrical across a diagonal axis, if you folded this layout along the red line, the two halves wouldn’t align.

For a more structured feel, I might repeat a pattern of single modules across the width of my layout. The even sizes and deliberate placement of elements in this arrangement create a sense of order.

Modular grid for website design
Even size spaces for images and text and a repeating pattern of modules creates a sense of order.

Or, for an altogether different feel, I may arrange an equal amount of horizontal and vertical spacial zones, and single modules, leaving two opposite modules empty to draw the eye across a page.

Modular grid for website design
Not every module in a modular grid needs to be filled. An empty space can be just as important as one filled with content.

Choosing different quantities of columns and rows for a modular grid can have a huge impact on the feeling created by a design. Three and four columns have a less formal feel and are better suited to longer passages of running text. Adding columns and rows makes a design feel increasingly formal and might be better suited to arranging more content.

Modular grid for website design
Left: Elements arranged on a 5x3 modular grid. Right: Those same elements arranged on a 6x4 modular grid.

When I increase the quantity of columns and rows in a modular grid they become smaller and quickens the speed of reading. Varying the amount of modules across several pages allows me to change the pace of someone’s experience across a complete design.

Modular grid for website design
Left: Elements arranged differently on this 5x3 modular grid. Right: Modular grids can be used to create any number of visually appealing layouts.

My choice of how many columns and rows to include in a modular grid will depend on several factors, including the amount and type of content, the feelings I want a layout to evoke, and the speed of the experience I want to create.

Modular grid for website design
Left: Elements arranged differently on this 5x3 modular grid. Right: Modular grids are excellent for bringing order to large amounts of varied content.

Layout Love

All these modular grids and more are available in my Layout Love modular grid set to make prototyping and site development work simpler. You can use Layout Love’s HTML and CSS for any personal or commercial design project. This set is just £2.99 and all five compound, modular, and ratio sets together are £9.99 which could save you many hours or work.


 
Experience EXPERIENCE

Working with clients for over 25 years

Articles ARTICLES
Contact us OK, LET’S TALK

Press to call 01745 851848

go.bananas@stuffandnonsense.co.uk