Are grids dead? Post-grid thinking in website layout design

From time to time, you might hear that a particular well-established design practice is no longer relevant. Grids haven’t been spared this scrutiny, with some designers embracing post-grid thinking and moving away from rigid website layout designs. Has the grid truly died, or should you take that claim with a grain of salt? This article will explore where grids come from, when it makes sense to break the rules, and when it doesn’t.

What is a website layout?

A website layout is the way content is structured and arranged on a web page. It includes key elements like grids, margins, columns, headlines, body text, images, navigation, and focal points.

When working on a website layout design, designers often rely on their concept, Gestalt principles, and the grid system, even if they want to break it later.

Common website layout patterns

Website design layouts vary, but some design patterns appear more often than others. Here are the most common ones.

Z-pattern layout

The Z-pattern website design layout follows how we naturally scan simple web pages: left to right across the top, then diagonally down, and left to right again. This pattern works well for minimalist pages with one or two key goals, like a B2B landing page. If you place key elements (like your logo, messaging, and buttons) along the Z path, you can guide users without overwhelming them. Keep in mind that this pattern doesn’t apply to audiences who read right to left. Their scanning behavior follows a different logic.

Split screen layout

Split screen layouts place text and visuals side by side, often with one side fixed. They’re a good way to keep strong imagery without needing full-width banners that work on every screen. For example, you can use a full-width hero on the homepage and switch to a split screen for product or info pages. Split layouts can break if not handled carefully, especially on tablets or smaller laptops, as elements may overlap or become hard to read. Testing a split screen layout on different screen sizes helps avoid this problem.

Grid-based layout

In grid-based layouts, content is aligned within rows and columns. Good grid systems make website design layouts feel predictable and adapt well to responsive design. 

History of grids in website design

Grids existed long before websites. The concept originated with Renaissance art and architecture, where mathematical structures guided symmetrical compositions. For example, even early book layouts used Villard de Honnecourt’s diagram to set consistent margins and page areas.

Modern grid-based layout design evolved in Switzerland after World War I with the appearance of asymmetric layouts. These were more dynamic than classical centered designs, with left-aligned text and varied margins. 

With the introduction of computers, designers started exploring digital layouts. This shift led to new design movements, which embraced digital tools, including grids, and helped establish the basics of modern website design layouts.

Grid anatomy

Grids are made up of several components. Here’s a breakdown of what they are and how they function as a system.

Columns: Columns are the vertical divisions of a grid. More columns offer greater flexibility for layout variations.

Rows: Rows are horizontal divisions that create a modular grid when combined with columns. Though less common in web design, they help structure both vertical and horizontal content.

Modules: Modules are units formed at the intersection of rows and columns. They’re normally used for repeatable content blocks or “cards.”

Regions: Regions are larger layout areas made from grouped columns, rows, or modules. They are often used to structure major sections of a page.

Gutters: Gutters are the space between columns or rows. Narrow gutters add tension, while wider ones create a more flexible layout.

Margins: Margins are the space outside the grid’s edges. Margins frame the layout but differ from padding.

Padding: Padding is the internal space within grid components. Its role is to separate elements on a web page and improve readability.

Flowlines: Flowlines are horizontal lines used to organize content flow and break layouts into logical sections.

Markers: Markers are zones reserved for secondary elements like headers, page numbers, or metadata.

Using the Golden Ratio, rhythm, and balance for grids

The golden ratio is a mathematical proportion where the longer part divided by the shorter part equals the whole divided by the longer part—about 1.618 to 1. In grid systems, the golden ratio helps decide how to divide space, like setting the width of a sidebar compared to a content area. If the total width is split so the content is 1.618 times wider than the sidebar, the layout feels visually right. This same principle can guide spacing between elements, column widths, and image cropping.

Rhythm in design means the repetition or variation of visual elements. It helps guide the viewer’s eye across a layout. Grids make this easier by giving you a framework to repeat spacing, align shapes, or place content in a steady, predictable flow.

Balance is about how the parts of a website layout design feel together—whether one side feels too heavy or if everything sits in harmony. A grid helps keep that balance by giving structure to where things go. 

Grids and responsive design

Grids can be either fixed or responsive. Responsive grids are the backbone of adaptive website layout designs. Unlike their fixed counterparts, which stay the same size regardless of the screen, responsive grids use percentage-based columns, flexible gutters, and media breakpoints to adjust the website layout design automatically across devices.

The shift: grids and post-grid layouts

So, if grids are that useful, why do some designers claim they’re dead? Grids have helped designers place and organize content for decades. They bring order, keep things aligned, and make layouts easy to follow, but as websites began to adjust to many screen sizes and devices, strict grid layouts started to feel too rigid, and designers wanted more freedom. This led to a new approach—post-grid design. In this approach, elements may float, overlap, or move in unexpected ways, which makes website layouts seem more open.

Still, most websites use grids behind the scenes. A website design layout might not look like it follows a grid, but it often does. Post-grid design doesn’t ignore the grid—it builds on it. So, are grids really dead? This is something every designer has to decide for themselves.  

Getting started with grids in Readymag

Readymag offers a flexible Grid and Layout system that helps structure and align your design elements with ease. Here’s a breakdown of key features you can use for designing a website layout:

Scale layout

By default, Readymag automatically adjusts your project’s size to match the viewer’s screen using Scale Layout. This way, your design will look consistent across different devices. Just make sure your browser zoom is set to 100% during previews for an accurate scale.

Custom Layout width

You can customize the layout’s width by clicking on the default ‘1024’ pixel value and entering a new width to suit your project’s design goals.

Guides

Guides let you set up columns and rows with custom widths and margins. They provide a visual framework for aligning elements. You can also enable a blue frame to highlight layout boundaries, which is useful when placing widgets outside the main canvas for animations or transitions.

Grid

Use the Grid settings to define the pixel-based grid spacing by moving your cursor up or down in the configuration panel. This helps maintain consistent spacing throughout your layout.

Snap

When Snap is enabled, widgets automatically align to the grid, guides, and nearby objects, making precise placement faster and easier.

Sizes

Turning on Sizes displays the exact height and width of all of the widgets on your page, which is especially helpful for consistent scaling and alignment.

These tools give you full control over your grid layout in Readymag. This dedicated Help page will help you better understand how to use these tools in practice.

Post-grid website layout examples

Let’s explore some website layout design examples of post-grid thinking:

meadowroom

The meadowroom site breaks away from conventional grids entirely. Sections ignore symmetry, and users can literally pick up and move text blocks around the page. This interactivity makes a monochrome website playful and fun to explore.

Bam Davis’ portfolio

The website is built on a grid—you can spot consistent alignments in the navigation and page layout—but that structure is regularly interrupted. Oversized, collage-like images layer unpredictably over one another as you scroll down the homepage.

Portfolio by Sonya Anikina

This portfolio uses a broken-grid approach that feels deliberately chaotic yet is still readable. There’s an underlying structure organizing content by sections and numbers, but it’s constantly disrupted. The designer isn’t trying to guide your eye in a straight line but rather invites exploration.

Want to see more post-grid thinking layouts? Check out our examples of websites built with Readymag.

FAQ

Why are grids important when thinking about layout?

Grids bring order. Even if you want to break the rules and come up with something innovative, having a grid in the background helps keep your website layout design from falling apart.

How can I improve my website design by using or breaking the grid?

Use a grid to place major content blocks, then experiment: nudge elements outside columns or try overlapping layers. The idea is that you can improve your website by structuring it first and then, if you want, you can start breaking the rules.