layout

Grid

We use grids to provide structure to the arrangement and spacing of page content and elements to create consistency and maintain visual hierarchy in layouts across any device.

Layout Grid

A layout grid is made up of columns, gutters, and margins. Content is placed inside the areas of the screen that contain columns. Gutters are fixed spaces between columns that help separate content, and margins are fixed spaces between the content and the left and right edges of the screen.

Anatomy of a layout grid: columns, gutters, and margins.

We apply layout grids to responsive page areas where content must scale, resize, and reorder depending on screen width. We refer to these as fluid page areas.

Fixed vs. Fluid Page Areas

In a typical layout, we may have both fixed and fluid page areas. Unlike fluid page areas, fixed page areas maintain a fixed width or height and the content inside these containers doesn’t scale responsively across screen widths. Both fixed and fluid page areas use breakpoints to determine when a layout needs to change significantly.

The areas highlighted in red (1. App Bar, 2. Navigation, 3. Side Panel) are fixed page areas with either fixed widths or heights, and therefore do not conform to the layout grid. The layout grid is applied to the responsive content area.

For Sketch templates of commonly used layout grids and instructions for creating layout grids, view our grid definitions in our Figma UI Library.

Responsive Behavior

Content inside fluid page areas adapts responsively depending on screen width. There are three ways content may behave across various device and screen widths: fluid resizing, stacking, and transforming.

Fluid Resizing

Fluid resizing works best for full-width containers in fluid (responsive) page areas. The width of the container scales down as the screen size gets smaller, and the content inside the container may rearrange at specified breakpoints.

Example of fluid resizing from Planning & Self-Study: The full-width “Template Content” card in the fluid content area scales down as the screen size gets smaller. The left-hand table of contents is a fixed page area and doesn’t scale responsively as the screen width changes.

Stacking

Stacking is used for side-by-side containers (and content inside containers) inside fluid content areas. As the screen width gets smaller and the available content area is reduced, side-by-side elements stack vertically.

Example of stacking from Planning & Self-Study: The side-by-side cards stack vertically as the screen width gets smaller.

Transforming

Transforming may be used for significant change when one UI element isn’t able to effectively communicate information across both large and small screen widths. In this case, the layout may switch between different displays at specified breakpoints.

Example of transforming from Planning & Self-Study: As the screen width gets smaller, the doughnut charts switch to bar charts in order to communicate the same level of information on the smaller screen.

Grid Implementation

The grid divides an area into columns in order to simplify coding layouts just by adding CSS classes. The widths of elements within the grid are measured by the number of columns they span. The main grid is divided into twelve columns. As an example, in order to create a two-column layout of equal widths, each column would be six grid columns wide. But, you could also make the columns unequal, for example three grid columns and nine grid columns wide. It’s that easy!

To use the grid, add the class wm-grid to divide a container into columns. Then add the class wm-grid-row to the element containing the content that is to be sized (the row’s width determines the width of the grid columns for its child elements). Finally, add the appropriate class name to each element in the row appending the number of grid columns it should span.

A 12-column grid demonstrating the use of classes.

The grid is responsive based on a number of standard breakpoints. If we go back to our example of the two-column layout with columns of equal width, making the columns full-width for viewport widths 1440px and below would be as simple as adding the following classes to both of our elements: wm-grid-col-6 wm-grid-col-lg-12.

Be careful: The number of columns varies based on the viewport width.

The classes and number of columns for each available breakpoint

Breakpoints Class prefix No. of columns
All Widths wm-grid-col 12
1440px wm-grid-col-xl 12
1280px wm-grid-col-lg 12
1024px wm-grid-col-md 10
768px wm-grid-col-sm 8
414px wm-grid-col-xs 4
320px wm-grid-col-tiny 4

Take a look at this CodePen for a working example.

Back to Top