Layout

Grid Layout

This component is a beta, this documentation page is still a work in progress.

Used to construct a visual grid for responsive page layout. A Proxy for CSS grid.

Interactive Demo

This demo allows you to preview the Grid Layout component, its variations, and configuration options.

columnGapspace020space040

rowGapspace020space040

1import React from 'react';
2import { GridLayout } from 'newskit';
3
4export default () => (
5  <GridLayout columnGap="space020" rowGap="space020" />
6);
7

API

Below are the properties for the Grid Layout component:

GridLayout

Grid Layout has a range of props that can be used to define an appropriate experience for different use cases.

Name	Type	Default	Description	Required

GridLayoutItem

Grid Layout Item has a range of props that can be used to define an appropriate experience for different use cases. Use this component within the NewsKit GridLayout component.

Name	Type	Default	Description	Required

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?