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

Grow Layout

Grow Layout automatically resizes a div element vertically to push the footer to the bottom of a screen. This component should be used to ensure the footer sits in the appropriate location when the volume of content is not enough to fill a page. Multiple elements can be added above or below the resizing content div as required. Grow Layout is used by the Header Footer Layout component and also by the Small Header Footer Layout component.

Installation

bash
npm install @nib-components/grow-layout

Usage

jsx
import GrowLayout from '@nib-components/grow-layout';

Grow Layout consists of two components, the Wrapper and the Content.

To use, wrap your page with <GrowLayout.Wrapper>. It is important that this is a direct parent of the <GrowLayout.Content> and any sibling elements (header and footer elements for example) you may have.

GrowLayout.Wrapper

The wrapping component that expands to fill the screen.

Unfortunately due to this flexbox issue in IE, we need two wrapping elements for this to work. <GrowLayout.Wrapper> contains both an OuterWrapper and InnerWrapper component.

GrowLayout.InnerWrapper grows to take up a minimum height equal to the height of the screen (100vh).

GrowLayout.Content

<GrowLayout.Content> expands to take up the remaining space on the screen, less the height of any other sibling elements.

Interactive demo

jsx

Props

GrowLayout.Wrapper

There are no props for this component.

GrowLayout.Content

PropTypeDefaultDescription
flexbooleanfalseWhether the GrowLayout.Content should should be display: flex;.