Stable

Tiles

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.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

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

<Tiles space={{xs: 4, md: 6}} columns={{md: 2}}>
  <LargePlaceholder>First tile</LargePlaceholder>
  <LargePlaceholder>Second tile</LargePlaceholder>
  <LargePlaceholder>Third tile</LargePlaceholder>
  <LargePlaceholder>Fourth tile</LargePlaceholder>
  <LargePlaceholder>Fifth tile</LargePlaceholder>
</Tiles>

Props

Prop	Type	Description
`children` (required)	node	The children of the tiles layout.
`space`	number or object	A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `1...10`.
`spaceVertical`	number or object	Defines vertical spacing between the children. A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `1...10`.
`spaceHorizontal`	number or object	Defines horizontal spacing between the children. A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `1...10`.
`columns`	number or object	The number of columns. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `1...6`.
`flex`	boolean	Whether 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>

Priority of space prop

When space, spaceVertical, and spaceHorizontal are defined as numbers, the space prop has the lowest priority.

jsx

<Tiles columns={{xs: 1, md: 3}} space={1} spaceHorizontal={2} spaceVertical={3}>
  <LargePlaceholder>First tile</LargePlaceholder>
  <LargePlaceholder>Second tile</LargePlaceholder>
  <LargePlaceholder>Third tile</LargePlaceholder>
</Tiles>

When the space prop is defined as an object, it overrides the spaceVertical and spaceHorizontal numeric values.

jsx

<Tiles columns={{xs: 1, md: 3}} space={{sm: 1}} spaceHorizontal={2} spaceVertical={3}>
  <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>.

Edit this page