UI Grids – All You Need to Know

Grids help designers create cohesive layouts, allowing end users to easily scan and use interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms.

There are three common grid types used in websites and interfaces: column grid, modular grid, and hierarchical grid.

Column grid involves dividing a page into vertical columns. UI elements and content are then aligned to these columns.

Modular grid extends the column grid further by adding rows to it. This intersection of columns and rows makes up modules to which elements and content are aligned. Modular grids are great for E-Commerce and listing pages, as rows are repeatable to accommodate browsing.

Hierarchical grid: Content is organized by importance using columns, rows, and modules. The most important elements and pieces of content take up the biggest pieces of the grid.

Breaking Down the Grid

Regardless of the type of grid you are using, the grid is made up of three elements: columns, gutters, and margins.

Columns: Columns take up most of the real estate in a grid. Elements and content are placed in columns. To adapt to any screen size, column widths are generally defined with percentages rather than fixed values and the number of columns will vary. For example, a grid on a mobile device might have 4 columns and a grid on a desktop might have 12 columns.

Gutters: The gutter is the space between columns that separate elements and content from different columns. Gutter widths are fixed values but can change based on different breakpoints. For example, wider gutters are appropriate for larger screens, whereas smaller gutters are appropriate for smaller screens like mobile.

Margins: This refers to the left and right outermost areas on the screen. Content does not live in the margins of a grid. This space can be fixed or expressed as a percentage of the screen width and can change at different breakpoints.

Example 1: Hierarchical Grid

Our first example is from The New York Times. This screen utilizes a hierarchical grid to create a newspaper-like reading experience. At desktop screen size, two main columns make up the hierarchical grid. The most important news story takes up the most space in the grid, the left column, followed by secondary and tertiary stories, which take up the smaller column and modules on the right.

Example 2: Column Grid

Our second example is from Ritual.com, a vitamin company. This design uses a column grid to create an attractive visual experience. At this screen size, four consistently sized columns make up the grid structure and elements are aligned to and within these columns. The gutters and the spaces in between the columns, are also consistently sized and help the user visually separate the different products. The margins are independently sized and are the same between the left and right sides.

Example 3: Modular Grid

Our third example is from Behance, a design library. The site’s design uses a modular grid to create a pleasant browsing experience. At desktop size, rows are made up of 4 consistently sized modules. Horizontal gutters are slightly thicker than vertical gutters and the margins are consistently sized on the left and right of the design. Like in the previous example, the gutters visually separate each element.

Example 4: Breaking the Grid

Our last example is Shrine from Google’s Material Studies. This design uses a column grid, as we can see based on the left navigation, which is 2 columns wide. Look closely and you will see that some product images settle to the margins, while others do not. Breaking the grid like this makes it challenging to focus or quickly scan product images and calls more attention to some products over others. It is okay to break the grid every so often, as long as you have a valid reason for it.

Benefits of the Grid

Using a grid benefits both end users and the designers alike:

• Designers can quickly put together well-aligned interfaces.

• Users can easily scan predictable grid-based interfaces.

• A good grid is easy to adapt to various screen sizes and orientations. In fact, grid layouts are an essential component of responsive web design. Responsive design uses breakpoints to determine the screen size threshold at which the layout should change. For example, a desktop screen may have 12 grid columns, which may be stacked on mobile so that the resulting layout has only 4 columns.

Even more importantly, the grid is not a throw-away concept. It is used by both designers and developers alike. Be sure to communicate with your developers the grid structure used when creating the design, so they can implement it accordingly.

Choosing and Setting Up Your Grid

Creating well-thought-out layouts and experiences for users heavily relies on how you utilize and establish a grid.

Opt for the appropriate grid based on your requirements. Take the time to carefully consider which type of grid — whether column, modular, or hierarchical — is most suitable for your needs. A hierarchical grid might be the ideal choice if a single item on your page consistently holds more significance than the surrounding elements. For instance, hierarchical grids are particularly effective for online news platforms. If the content you are working with varies significantly, consider employing a basic column or modular grid, as these offer greater flexibility during the design process. Elements and content can span multiple columns or modules, or just one, to accommodate design necessities.

Allocate ample time to establish your grid. Once you have determined the most suitable grid type for your requirements, begin setting it up. Define the number of columns, as well as the margin and gutter sizes in relation to different screen sizes. It is advisable to prepare for various screen sizes such as mobile, tablet, and desktop. A 12-column grid at laptop or desktop size generally offers sufficient flexibility for most design purposes. The number of columns will decrease as the device size decreases. Tools like Sketch and Figma provide convenient methods for setting up and adjusting your grid, even after you have commenced the design process.

Always place content within columns, not gutters. The gutters should remain empty as you place elements on the grid in order to clearly separate and align content and elements.

Consider using an 8px grid system. For most common devices, the screen size in pixels is a multiple of 8. Keeping grid-component values at a multiple of 8 will generally make it easier to scale and implement a grid.

Conclusion

Grids not only provide designers a structure on which to base layouts, but they also improve readability and scannability for end users. Use a good grid system that easily adapts to various screen sizes.