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.
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.
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!
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.
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.
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.
The Stack component is responsible for controling the vertical white space between elements. Stacks allow you to apply a standard spacing between direct children.
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.
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
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.
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.
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.
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
Tiles components can both achieve the desired layout. Please refer to our FAQ on When to use Column/s or Tiles.
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.
Although this could be done with the
Column/s components, the simplest way to do this is with
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.
Let's take this simple example using the
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
Note the use of
width="content". This ensures the
Tagis 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.
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.
In this example, we can see that at the
md breakpoint, the column wrapped in the
Hidden is no longer visible.
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.
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
- 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
- Braid Design System: Layout
- Our layout components were inspired by Seek's Braid design system.
Author: Jordan Collins
Reviewers: Laurie Jones, Michael Troy
Published: 15 June 2021