Grid Layout

Problem

Although a LINEARIZED LAYOUT works in most cases, sometimes you have content that does not need to, or should not, fill the entire width of screen.

Solution

Arrange elements in a matrix of one or more rows.

While not as recurrent as the LINEARIZED LAYOUT, a GRID LAYOUT can be quite effective with some types of content. It is typically used with image content such as photos, illustrations or icons. The most common case is to present a gallery of images, but you can still use it with text, as long you keep it to a few words. Long paragraphs of text can become almost unreadable even if your grid only has two columns.

A GRID LAYOUT can have as many divisions as needed; however, if the grid blocks work as buttons they should be large enough and adequately spaced so they are easily triggered — use a TOUCH FRIENDLY BUTTON or an ICEBERG TIP on those cases. Although in most examples blocks have the same height and width, they can still assume irregular forms. That is, blocks can span multiple columns or rows (Figure 1).

Web Design Patterns for Mobile Devices

Figure 1. Hillsong website.

Because with this pattern you are displaying multiple items side by side, in some cases it can be a more efficient use of the vertical space than a LINEARIZED LAYOUT. For example, if you have a VERTICAL LIST where each item is composed by only one word, you can save space by displaying several items on the same line.

Web Design Patterns for Mobile Devices

Figure 2. The TOGGLE MENU on Etsy website reveals a menu that presents items on a grid.

Web Design Patterns for Mobile Devices

Figure 3. The Etsy website uses a SLIDESHOW that presents on the same slide multiple images on grid, each one working as a link.

The GRID LAYOUT can be used as a more structural pattern, or combined with other patterns to extend their capabilities. For example it can be used with a TOGGLE MENU to increase the number of items visible on the screen (Figure 2); or with a SLIDESHOW to increase the number of items by slide (Figure 3).

***

Web Design Patterns for Mobile Devices
Microsoft mobile, 04/2012
Web Design Patterns for Mobile Devices
dconstruct 2012, 04/2012
Web Design Patterns for Mobile Devices
Jessica Hische, 04/2012
  • Grid in Designing Mobile Interfaces