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

The Tiles layout component is to be used to render a grid of components with equal spacing. The number of columns can be responsively set and tiles will automatically wrap to new lines.

Installation

bash
npm install @nib/layout

Usage

jsx
import {Tiles} from '@nib/layout';

Do not style layout components

You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.

Interactive demo

jsx

Props

PropTypeDefaultDescription
children (required)nodeThe children of the tiles layout.
spacenumber or objectA size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 1...10.
columnsnumber or objectThe number of columns. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 1...6.
flexbooleanWhether the wrapper around each child is display:flex. Useful for forcing equal heights.

Considerations

Tiles should be used for grid-style layouts. Tiles have similar columns behaviour as our Columns component but with the children widths being determined by the parent component. Tiles also automatically wraps children to a new row if the number of child components is more than the number of columns.

Responsive

Often you will want less space between elements and less columns on mobile-sized screens than desktop. Both the space and columns props accept an object of breakpoints to allow responsive tiles.

jsx
<Tiles columns={{xs: 1, md: 3}} space={{xs: 4, md: 6}}>
<LargePlaceholder>First tile</LargePlaceholder>
<LargePlaceholder>Second tile</LargePlaceholder>
<LargePlaceholder>Third tile</LargePlaceholder>
</Tiles>

DOM element

The Tiles component is a styled div element. To change this you can use the styled components as prop:

jsx
<Tiles space={4} as="ul">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Tiles>

Simplified resulting DOM markup:

html
<ul>
<li>
<div>One</div>
</li>
<li>
<div>Two</div>
</li>
<li>
<div>Three</div>
</li>
</ul>

Default list styling has been removed from the tiles component and each child will be wrapped in a <li> if stack is a <ul> or <ol>.