📣
Have your say in our Mesh survey
Skip to content

Using layout components

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!

Lorem ipsum dolor sit amet.
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.

One
Two
Three
Four
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.

Left
Right
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, 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.

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.

First column
Second column
Third column
Fourth column
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.

First tile
Second tile
Third tile
Fourth tile
Fifth tile
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.

Hidden content (below xs screen size)
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.

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

jsx

Inline vs. Column/s for horizontal structure

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

10

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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:

10

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Column 1

Column 2

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