Updated: July 28, 2017

Grid Layout

Intro

Grids keep UI elements in your app aligned and organized. In Fiori for iOS we use grids to help create clean and beautiful apps.

Basics

Generally, grids only apply to content area on the screen when Nav Bar, Toolbar and Tab Bar follow their own visual specifications.

Alignment

When creating high-fidelity screens with your design software of choice (e.g., Sketch, Illustrator, etc.), it is critical to be mindful of how your elements are aligned.

When a text box is created in design software, there is typically 1pt of padding surrounding the actual text characters. However, the outside edge of the text box (not the edge of the text characters themselves) should serve as the reference point when aligning the text box.

In these examples, the guideline (shown here as a thin, red vertical line) should just be touching the edge of the text box, not the text characters.

Do
Don't

Similar to the text box, icon images are contained within bounding boxes. When aligning icons images, the edges of the bounding boxes should serve as the reference point, not the icon itself, as icons may or may not fill their bounding boxes completely.

Do

Divider

Dividers are used to visually separate and organize content into discrete groups to make it easier for the user to make sense of large amounts of information.

Layout Margins

The side margins can be either 16 or 20 points depending on how and where the controller is presented. These margins are not changeable.

iPhone 6/ 6s / 7

Side margins are 16 points on portrait and landscape.

iPhone 6+/ 6s+ / 7+

Side margins are 20 points on portrait and landscape.

iPad default

Side margins are 48 points as default for iPad. There can be two columns for table cells when most of the contents need screen wide display.

One Column
One Column
Two Column
Two Column

iPad with Readable Width

When there are a lot of texts on the screen, it is recommended to apply readable width on an iPad in landscape orientation. iOS has defined the maximum optimal width for text objects inside the view by increasing the side margins. The margins also vary depending on different screen size. The difference becomes obvious only when working on an iPad in landscape orientation.