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.
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).
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.
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).
- Grid in Designing Mobile Interfaces