Digging deep in layout grids in mobile app design (2024)

Digging deep in layout grids in mobile app design (1)

Published in

UX Collective


6 min read


Oct 9, 2019

Digging deep in layout grids in mobile app design (3)

In this article, I would like to share with you practical tips and tricks that can be useful when building grids in the design of mobile interfaces. These are just tips, not indestructible dogmas.

We’ll look at:

  • The optimal number of columns
  • How to properly count gutters and margins
  • Fixed and responsive grids
  • Grids calculation accuracy
  • The grid inside individual elements (modules)
  • Rows and Vertical rhythm

Grids are one of the main tools of the designer, which helps them to achieve the consistency of elements, establish connections between them and build a visual system that would look harmonious and help users navigate.

So, let’s start

Don’t limit yourself to the number of columns in the first stage. First, create a lo-fi or hi-fi prototype of your interface. Decide on the basic elements and user flows. And only after that, you can begin to choose the optimal number of columns and sizes. Don’t worry if you have to change their number in the process. 😎

“What is the optimal number of columns in the grid for mobile?” I think this is one of the most common questions among designers who begin to design a mobile interface. The most common misconception appears when it comes to the small size of the screen, which width is often not bigger than a few columns on the web.

One of the most convenient grids for mobile interfaces, similar to the web, is a 12 column grid. This grid will allow you to place both an even and an odd number of elements in a row.

Digging deep in layout grids in mobile app design (4)

The disadvantage of a 12 columns grid for mobile is that the width of one column is so small that you might rarely create elements with a width of one column.

If you choose 2, 4 or 8 column grid, keep in mind possible problems with placing an odd number of elements in a row.

Don’t dwell on one grid. Interface design can often contain hundreds of different screens, therefore, one grid might not be suitable for all screens. Create additional grids if necessary, but don’t forget about the consistency of the design.

The consistency in the grids will help you to achieve: equal layout margins, equal or proportional gutters between the columns, and the same behavior when changing the size of the columns themselves.

Digging deep in layout grids in mobile app design (5)

Ok, we decided on the optimal number of columns. Let’s define the gutters and margins.

First, let’s look at the guidelines of the operating systems to find out layout margins (offsets). Currently, the minimum recommended layout margins is 16pt for Android and iOs. This means that if you want to adhere to the system guidelines, the margins shouldn’t be less than this value. (But they can be bigger 😉)

Digging deep in layout grids in mobile app design (6)

When choosing a 12 column grid, the gutters between the columns shouldn’t be too large, since due to the small width of the columns and the large gutters between them, the columns will begin to visually break up.

If you, like me, are a fan of the 8pt grid, I recommend that you choose the size of the gutters proportional to the 8pt module. So the horizontal and vertical rhythm of the layout will overlap each other.

You can read more about 8pt grid here:

Digging deep in layout grids in mobile app design (7)

Gutters must be proportionate to the layout margins (offsets). It will make the grid more consistent and will also allow you to easily place elements like a carousel in it.

Digging deep in layout grids in mobile app design (8)

As well as in web design, you can use a fixed or a responsive grid in mobile design. Smartphone screens are not so dramatically different from each other in width so the optimal solution will be to use flexible grids and stretch the columns in width.

I recommend using a responsive grid size because this approach will make more efficient use of the entire screen space of the smartphone, which is already very limited.

Digging deep in layout grids in mobile app design (9)

Always start either with a smaller screen size in the system or with the most popular one. For example, at the moment in iOs, the smallest screen is the iPhone SE (320sp), and the most popular is the iPhone 8/7/6 (375sp). Next, just stretch the columns themselves and leave the same gutter sizes.

This approach is suitable for most cases, but of course, there will be exceptions to the rules when there is no need to stretch content in a column.

In iOs, most screens have an odd width and therefore aren’t divided without a remainder. In Android, you can also find such screen sizes.

In this case, you have several options:

Compensate for 1pt due to different sizes for layout margins.

For example, set left margin 24pt and right 23pt. Most likely no one will notice the difference visually, but your inner perfectionist will be a bit unhappy 😡.

Digging deep in layout grids in mobile app design (10)

Advantages: the remaining space can be divided into the desired number of columns

Disadvantages: Developers need to always keep in mind the difference in layout margins, and for example on iPhone SE (320sp) change the odd margin to even.

Leave the exact values for the margins (for example 24pt) and use fractional column sizes.

Your inner perfectionist will be unhappy again. But in fact, this method is not as bad as it might seem, due to the fact that modern screens have a higher pixel density. It is unlikely that any of the users will notice the presence of half pixels that appeared as a result of fractional values.

Advantages: the algorithm itself will consider the width of the columns and you will not have to invent various options for the grid for different widths

Disadvantages: At the moment, creating such an exact grid in a graphical editor going to be problematic. For example, Figma refuses to create fractional values for columns. Grid created from rectangles inside the frame itself may be the solution.

As well as in large sizes, you can have separate modules in the design. In this case, a separate module (element) may have its own grid.

The same rule applies here as with additional screens. It is necessary to observe the consistency in the grid inside the module.

Digging deep in layout grids in mobile app design (11)

To build larger modules and maintain a vertical rhythm, you should create rows and the gutters between them that are commensurate with the main module. (in my example proportional to 8pt module)

Digging deep in layout grids in mobile app design (12)

This article is just a concrete example, the purpose of which is to encourage you to start exploring grids in mobile interfaces. Search and find optimal solutions for specific tasks and projects.

And don’t forget:

“Know the rules well, so you can break them effectively.” The Dalai Lama

What tricks do you use when building grids for mobile interfaces? Please, share in responses.

Follow me on twitter

I also write about product design on my LinkedIn

Digging deep in layout grids in mobile app design (2024)


What is the best layout grid for mobile? ›

The most common responsive grid sizes are 960px and 1440px. The 960px grid works well for desktop layouts, while the 1440px grid is more suitable for mobile design.

Which type of grid layout is commonly used in mobile app design for organizing content? ›

Consider using an 8pt grid for UX/UI design

It is now common to use an 8pt grid, because it means designs can scale perfectly on retina screens, and works whether you are using vector or pixel based designs.

What is the purpose of the grid on the phone layout? ›

Baseline grid

Building with an underlying grid helps create consistent spacing and alignment across your UI. Android UI utilizes an 8 dp grid for layout, components, and spacing. Smaller elements such as icons, type, and some elements within components are best aligned to a 4 dp grid.

What are the two basic types of grid layouts? ›

All layout grids can be designed in two ways: symmetric or asymmetric. Symmetric grids follow a center line. The vertical margins are equal to each other, as are the horizontal ones. Columns in a symmetric layout are also the same width.

What is the main disadvantage of grid layouts? ›

One of the main disadvantages is that grids can make a design feel rigid and inflexible. If designers are too strict in their adherence to the grid, they may find that they are unable to create unique and interesting layouts that stand out from the competition.

What is the most popular grid layout? ›

Column grid

The column grid is the most common website design and development grid system. Column grid works by dividing the layout into a series of vertical columns where you organize and align web elements or contents—the column grid help to develop a design for various sizes of screen devices.

What are the 4 types of grids? ›

There are four main types of grids in design. They are manuscript, column, modular and hierarchical grids.

What are the 3 different grids? ›

Grid: A visual made up of columns, gutters, and margins that provide a structure for the layout of elements on a page. There are three common grid types used in websites and interfaces: column grid, modular grid, and hierarchical grid.

How much margin do I need for a 12 column grid? ›

Margins. The twelve column grid does not have a maximum width. It has a width of 100%, with built in margins that create padding between column count and the edges of the viewport. In devices with a screen width greater than 768px, the margins are 5% on the left, and 5% on the right.

How using grids can improve your design? ›

Grids can greatly speed up and improve your design time, as they can act as a guide that signals where is best to place, position, and scale elements. Instead of randomly positioning elements until you find a decent looking composition, a grid should help guide you toward a natural solution.

How do I create a responsive grid layout? ›

Set the display property to "grid" to display an element as a block-level grid container. Define the gap between the grid in pixels with the grid-gap property. Set grid-template-columns to "repeat(auto-fill, minmax(150px, 1fr))". This property specifies the size (width) of each column in the grid layout.

What is the difference between data grid and layout grid? ›

Unlike grids used to present data, A grid used for layout does not necessarily have header cells for labelling rows or columns and might contain only a single row or a single column.

What is the difference between grid and layout? ›

The basic difference between CSS grid layout and CSS flexbox layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.

What is UI design grid? ›

What is Grid System in UI Design? Grid System is a series of horizontal and vertical line that creates a framework to build a User Interface for multiple devices. Designers create Grids for better layouts which allow users to use the interface in a better way by adapting to multiple screen sizes.

What two elements are used to create a grid system layout? ›

Columns and Rows

These properties are used to create the grid by sizing the rows and columns. In this example, the grid defined will have two columns. The first will have a size of 200px and the second one will measure 100px; both will have a row size of 50px.

What is the best margin for mobile app? ›

Margins provide spacing on the left and right edges of the screen and content. A standard margin value for compact sizing is 16 dp, but margins should adapt to accommodate larger screens. Your app's body content and actions must stay within and align with these margins.

What is the best grid ratio? ›

A grid ratio of 5:1 is generally used for 20-40kVp (i.e. mammography), 8:1 is used for 70-90 kVp technique and 12:1 is used for >90 kVp technique. Higher grid ratios are more effective at reducing scatter, however are more expensive and require a higher dose.

What is the margin for mobile grid? ›

To better adapt to the screen, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content. On mobile, at a breakpoint of 360 dp, this layout grid uses 16dp margins.

What is the standard grid layout? ›

That being said, the standard grid layouts in web design consist of six, nine, or 12 columns. But it's really up to the designer to decide how many columns they find necessary. Once placed inside a column grid, text and images follow the alignment of the columns' vertical lines and flowlines.

Top Articles
Latest Posts
Article information

Author: Allyn Kozey

Last Updated:

Views: 6256

Rating: 4.2 / 5 (43 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Allyn Kozey

Birthday: 1993-12-21

Address: Suite 454 40343 Larson Union, Port Melia, TX 16164

Phone: +2456904400762

Job: Investor Administrator

Hobby: Sketching, Puzzles, Pet, Mountaineering, Skydiving, Dowsing, Sports

Introduction: My name is Allyn Kozey, I am a outstanding, colorful, adventurous, encouraging, zealous, tender, helpful person who loves writing and wants to share my knowledge and understanding with you.