An Introduction to Broken Grid Layouts in Web Design

As avid internet users, we love a nice grid. A grid layout arranges contents in a way that our eyes and brains naturally understand, allowing us to quickly and efficiently digest text and media — it’s no wonder that most websites use them.

如果您想抓住机会并在网站上推动设计信封，则可能需要尝试一个破碎的网格布局instead.

Broken grids aren't a perfect solution for every website, but those who want to inject a bit more personality and originality into their pages can do so in the layout itself. In this guide, we’ll learn how to break the standard grid layout in favor of something different.

But first, let’s review what a standard grid layout can accomplish in web design, just so we know what we’re actually trying to break here.

What Is a Grid Layout?

In web design, a grid layout is a way of structuring and organizing page content such as text, images, buttons, and other elements. A grid layout segments the web page into columns of equal width. Elements are placed and aligned within these column boundaries.

The grid layout is more of a concept than a defined method. To implement a grid layout, designers follow a particular grid system, a set of specific rules for how a grid should be formatted.

There are many grid systems in use today, one of the most popular being the 12-column variant ofthe 960 Grid System.

Image Source

This system divides the width of the page into 12 columns, each 60 pixels wide, separated by 20-pixel spaces. Designers unflatteringly refer to the spaces between columns as “gutters.

Grid systems like 960 are very, very common on the web — they inform the design of the vast majority of websites. While it’s difficult to get an exact count, I’d wager that at least nine of your 10 most-frequented sites probably follow a grid layout to some extent. For a clear-cut example of a functional grid, look no further thanour blog page:

Image Source

但是，为什么网格首先如此受欢迎？网格布局使网页设计人员和网络开发人员能够：

• 更快，更轻松地构建页面，不必每次都重新发明轮子。
• organize page elements of varying types and sizes.
• adjust the spacing and sizing of elements to fit together neatly.
• 安排内容,帮助用户轻松扫描并导航页面.
• follow an established practice that users have come to expect while browsing.

所有这些因素使网格成为网页设计的久经考验的方法。它足够灵活，可以容纳任何类型的内容，虽然足够僵硬，足以使网站保持直觉和可通道。

However, there’s no rule saying your website needs to follow a grid layout. If you’re not afraid to get more create and break from convention to build a site that stands out, consider “breaking the grid.”

What Is a Broken Grid Layout?

A broken grid layout is a web page layout that defies some standard of a traditional grid layout. This could mean adjusting column width and/or row size, overlapping and stacking elements, animations, or other techniques beyond what a grid system dictates

Broken grid layouts allow designers to engage users with unique but visually-engaging pages arrangements. If you want to offer up a memorable experience and distinguish your online business from competitors, broken grids are one design approach to achieve this.

Like the standard grid layout, the broken grid layout is not a set of hard rules — you can break the grid in a few ways. In the next section, we’ll discuss the most common and effective techniques for building broken-grid websites.

How to Create a Broken Grid Web Design

Breaking the grid doesn’t typically mean throwing all grid-related concepts out the window. Sometimes even subtle variations on well-established techniques can lend some extra visual allure.

刚开始时，最佳的网格设计方法是首先在960等网格系统中构建页面，然后通过CSS或图形接口工具调整网格的样式，以生成原始的东西。

You may prefer to draw out ideas beforehand, or go in blind and experiment — either way, it’s easier to work from a pre-build grid than style the placement of elements from scratch

Here are some changes you can make to traditional grids to elevate your site beyond plain rows and columns:

Varied Alignment

制作损坏的网格布局的一种直接方法是拥抱不对称并更改页面元素的垂直对齐。就像将元素放在网格中，然后更改列宽度一样简单。这种基本方法违反了用户对文本图像的期望，应该对左，右或中心对齐。

扎拉does a nice job of this technique on their site, shown below. Notice how each column varies in width, and the occasional overlap between column elements:

Image Source

Layering

“Layering” is a fancy term for making page elements overlap each other. When distinct elements cross paths, the user unconsciously assumes they are related and processes them as a single visual item with depth.

Layers can be challenging to implement on the first try without looking messy — somesketching, adjusting, and experimentation will be useful to produce a cohesive look that effectively breaks the grid.

Australian recruitment firm大理石在其主页上完成了简单但有效的分层 - 主要标题“关于人”。坐在搜索形式的前面，以连续关注这两个要素。

Image Example

Containers

Instead of having your page elements partially overlap, you might try placing related text, icons, and/or纽扣entirely inside an image or block element. With this approach, the block element serves to contain its child elements and unite them together. Containers are a natural way to break up your grid while keeping content organized.

In the example below, some containers enclose multiple elements, including images, text, links, and solid colors. Though there is overlap and asymmetry, it’s clear which elements are related.

Image Source

空格

空格is a hidden hero of web design. Without some breathing room between content blocks, the average web page would be confusing and overwhelming.

In your grid experiments, don’t be afraid to turn up the dial on whitespace and emphasize just one or two pieces of content. Exaggerated margins draw focus entirely to your featured elements, a spacious alternative to your standard grid layout.

The visual portfolio website below showcases its off-centered images against a white background, with more scattered images entering frame as you scroll. This minimalist approach helps users focus on the featured artwork and avoids the tired row-column presentation we see so often with online image displays.

Image Source

Gutters

Grid systems tend to create their gutters by adding margins to each column in the grid. In the 960 grid system, for example, each column has a margin of 10 pixels on either side, which creates 20-pixel-wide gutters between adjacent columns.

对于大多数基于网格的网站而言，沟槽是至关重要的，要添加空格并限制混乱，但是您可能会尝试与它们一起玩，以查看可以创建什么效果，甚至完全取消它们。

Take this spin-off website from Canadian design firmBlender Media— its tiles are arranged in an obvious grid, but there’s no gutter at all. A felt纹理效果helps create a quilt-like aesthetic. If you’re taking this approach to broken grids, always select contrasting background colors to establish a clear border.

Image Source

插图

与您的童年着色书可能教给您的内容不同，可以在台词之外绘制 - 只要确保您的插图是有意的和有品味的即可。跨越网格和/或重叠其他元素边界的图纸可能会为访问者所习惯的干净切割边界带来一些受欢迎的变化。

This use of illustration by an Italian seafood brand is a delight. It features animated illustrations of sea life that move inparallaxand cross column boundaries. In my opinion, it’s about as fun as a frozen fish website can be.

Image Source

Breaking Out of the Grid

As we’ve seen, broken grids usually don’t abandon the grid concept altogether. Instead, they offer an alternative take on the format through subtle adjustments. Think about each of these methods when imagining the future layout of your site, and see if you or your design team can work out an implementation in CSS.

Also, keep in mind that broken grids still adhere toweb design principles尽管他们的创作自由。无论如何,your site should be simple, mobile-responsive, accessible, easily navigable, consistent in aesthetic choices. You don’t need to give up a pleasing user experience in order to stand out.