Design Tokens for Mesh have just been released!
Skip to content

Layout

Mesh provides a set of utility layout components which manage the structure and spacing between elements. By using these layout components, we remove the risk of inconsistent spacing between our UI components and are left with a simple and responsive spacing standard for a variety of use cases.

Component overview

The layout components in Mesh are:

These components have been designed with responsiveness in mind using the custom spacing and screen breakpoint values provided by our Theme. This responsive feature can be very powerful and should be used in place of custom solutions.

All of these components can be nested within another and can be used as often as required to create the required layout.

Box

The Box component is the lowest-level utility component available in Mesh. The purpose of Box is to negate the need to create custom styles on elements by providing props for standard spacing, background, colors, display properties and more.

This component should be the most used component in your UI as many nested box components can be used for almost all styling requirements. You can never use too many Box components!

jsx

Container

The Container component is designed to limit pages and their content to a maximum width of 1200px. On screen sizes above this, the Container will be horizontally centered.

jsx

Section

A section of a page, with standardised, responsive padding across screen sizes and a nested Container component. A Section will expand to fill horizontal space and therefore has a range of use cases but was designed with full-width sections of a page in mind.

jsx

SplitSection

The SplitSection component is used to split the full screen width into two equal columns, whilst maintaining the standard container width for the content. It allows background colours to be applied to each side, to the edge of the screen, without affecting the positioning of the content.

jsx

Stack

The Stack component is responsible for controling the vertical white space between elements. Stacks allow you to apply a standard spacing between direct children.

jsx

Inline

The Inline component is responsible for controling the horizontal white space between elements. This can be thought of as the inverse of the Stack component which focuses on horizontal spacing, rather than vertical. Inline can also be used to manage the horizontal and vertical alignment of it's children.

jsx

By default, Inline will wrap its children when their width exceeds it's surroundings and there isn't enough space to render the inline children on one line.

To prevent this, either you can set nowrap prop to true or you may want to use the Column/s components to maintain this horizontal structure regardless of available space. Below is an example on how to achieve this using Column/s.

Column and Columns

The Column and Columns are layout components that should also be used together. They are responsible for managing elements that need to be displayed in a columnar structure. Column components must be placed inside Columns.

The Column component defines the width and behaviour of the individual columns themselves. Multiple Column components should be used and each can have their own widths and behaviour.

The Columns component manages the horizontal structure surrounding the Column components, including the column positioning and alignment.

By default, the Column widths are equal unless the width prop states otherwise. To ensure the width of the Column only takes up as much space needed to fit the inner content, you can use width="content". The other columns will then take up the remaining space equally. This is demonstrated in the following example, where the first column with a width of content is as wide as the content inside. The second column is then 1/3 of the remaining space, which leaves the last two columns with equal widths sharing 2/3 of the remaining space.

jsx

Tiles

The Tiles component is used to render a grid layout with equal spacing between the elements.

This grid layout can also be achieved using a combination of other layout components, however this is a simplified and flexible method.

There may be a situation where the Column/s or Tiles components can both achieve the desired layout. Please refer to our FAQ on When to use Column/s or Tiles.

jsx

Hidden

The Hidden component is used to manage the responsive visibility of elements.

It is not a structural component like the others, but instead a wrapper around elements that dynamically controls their visibility to users and screen readers.

jsx

Examples

Card grid layout

Although this could be done with the Column/s components, the simplest way to do this is with Tiles.

The flex prop (also available on Column) is used to grow the children to the space available, ensuring consistent height. Remove the flex prop in the editor below to see this change in behaviour applied to the cards.

jsx

Inline vs. Column/s for horizontal structure

Let's take this simple example using the Inline component:

jsx

You can see that when the content no longer fits, the children will wrap down to a new line; breaking the initial horizontal structure.

This is often not how you expect the Inline component to behave. If you want the horizontal relationship between the children to remain, you should use the Column/s components:

jsx

Note the use of width="content". This ensures the Column containing the Tag is only as big as the tag itself.

As you can see, instead of stacking the elements, it now maintains the horizontal structure of the Columns and wraps the copy within its column when the screen width is reduced.

Using Hidden with other layout components

The Hidden component works well with both UI components and other layout components. For example, you may want to responsively hide a Column on small screens.

Resize the screen to watch the example below responsively show and hide the first column.

jsx

In this example, we can see that at the md breakpoint, the column wrapped in the Hidden is no longer visible.

FAQs

Can I use layout components together?

Yes! Layout components are utility components and can be used in any combination required.

Here is a playroom example showing how multiple nested layout components can work.

When should I use Column/s or Tiles?

We recommend using Column/s in most cases as it provides more flexibility and customisation. However, there are a number of layouts that benefit from the Tiles.

Use Tiles over Column/s if:

  • A grid structure with multiple rows are required
  • The layout uses a dynamic number of columns at different screen sizes
  • You want to display a collection of identical components (such as Card)

Resources

Credits

Author: Jordan Collins

Reviewers: Laurie Jones, Michael Troy

Published: 15 June 2021